diff --git a/demo/payload.config.ts b/demo/payload.config.ts index c48a3f6f7a..9889669d8c 100644 --- a/demo/payload.config.ts +++ b/demo/payload.config.ts @@ -42,6 +42,7 @@ export default buildConfig({ // // favicon: '/img/whatever.png', // }, disable: false, + scss: path.resolve(__dirname, './client/scss/overrides.scss'), components: { // Nav: () => ( //
Hello
@@ -101,9 +102,6 @@ export default buildConfig({ graphQLPlayground: '/graphql-playground', }, defaultDepth: 2, - paths: { - scss: path.resolve(__dirname, './client/scss/overrides.scss'), - }, graphQL: { maxComplexity: 1000, mutations: {}, // TODO: needs typing diff --git a/docs/Admin/components.mdx b/docs/Admin/components.mdx index 48a8a9bec5..563b095681 100644 --- a/docs/Admin/components.mdx +++ b/docs/Admin/components.mdx @@ -5,3 +5,12 @@ order: 20 --- Talk about how to build custom components. Show a list of all components that can be swapped out. + + +### Collections + +Talk about Collection-based components here. + +### Globals + +Talk about Global-based componeents here. diff --git a/docs/Admin/customizing-scss.mdx b/docs/Admin/customizing-scss.mdx new file mode 100644 index 0000000000..d15e3b70bb --- /dev/null +++ b/docs/Admin/customizing-scss.mdx @@ -0,0 +1,67 @@ +--- +title: Customizing CSS +label: Customizing CSS +order: 30 +--- + +### Adding your own CSS / SCSS + +You can add your own CSS by providing your base Payload config with a path to your own CSS or SCSS. Customize the styling of any part of the Payload dashboard as necessary. + +To do so, provide your base Payload config with a path to your own stylesheet. It can be either a CSS or SCSS file. + +**Example in payload.config.js:** +```js +import { buildConfig } from 'payload'; +import path from 'path'; + +const config = buildConfig({ + serverURL: 'http://localhost:3000', + admin: { + css: path.resolve(__dirname, 'relative/path/to/stylesheet.scss'), + }, +}) +``` + +### Overriding SCSS variables + +You can specify your own SCSS variable stylesheet that will allow for the override of Payload's base theme. This unlocks a ton of powerful theming and design options such as: + +- Changing dashboard font families +- Modifying color palette +- Creating a dark theme +- Etc. + +To do so, provide your base Payload config with a path to your own SCSS variable sheet. + +**Example in payload.config.js:** +```js +import { buildConfig } from 'payload'; +import path from 'path'; + +const config = buildConfig({ + serverURL: 'http://localhost:3000', + admin: { + scss: path.resolve(__dirname, 'relative/path/to/vars.scss'), + }, +}) +``` + +**Example stylesheet override:** +```scss +$font-body: 'Papyrus'; +$style-radius-m: 10px; +``` + +To reference all Sass variables that you can override, look at the default [SCSS variable stylesheet](https://github.com/payloadcms/payload/blob/master/src/admin/scss/vars.scss) within the Payload source code. + + + Warning:
+ Only SCSS variables, mixins, functions, and extends are allowed in your SCSS overrides. Do not attempt to add any CSS declarations to this file, as this variable stylesheet is imported by many components throughout the Payload Admin panel and will result in your CSS definition(s) being duplicated many times. If you need to add real CSS definitions, see "Adding your own CSS / SCSS" the top of this page. + + + + + + + diff --git a/docs/Configuration/blocks.mdx b/docs/Configuration/blocks.mdx deleted file mode 100644 index a73c952f0f..0000000000 --- a/docs/Configuration/blocks.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Block Configs -label: Blocks -order: 40 ---- - -Talk about how to write block configs here. diff --git a/docs/Configuration/collections.mdx b/docs/Configuration/collections.mdx index dd10249078..a5fe9ed778 100644 --- a/docs/Configuration/collections.mdx +++ b/docs/Configuration/collections.mdx @@ -1,25 +1,27 @@ --- -title: Collection Configuration +title: Collection Configs label: Collections order: 20 --- -Payload Collections are defined through configs of their own, and you can define as many as your application needs. Each Collection will map one-to-one with a MongoDB collection automatically based on fields that you define. +Payload Collections are defined through configs of their own, and you can define as many as your application needs. Each Collection will scaffold a MongoDB collection automatically based on fields that you define. It's often best practice to write your Collections in separate files and then import them into the main Payload config. -## Collection Config Options +## Options | Option | Description | | ---------------- | -------------| -| `slug` | Unique, URL-friendly string that will act as a global identifier for this collection. | -| `labels` | Singular and plural labels for use in identifying this collection throughout Payload. | -| `fields` | Array of field types that will determine the structure and functionality of the data stored within this collection. | +| `slug` | Unique, URL-friendly string that will act as an identifier for this Collection. | +| `labels` | Singular and plural labels for use in identifying this Collection throughout Payload. | +| `fields` | Array of field types that will determine the structure and functionality of the data stored within this Collection. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. | | `admin` | Admin-specific configuration. See below for [more detail](/docs/collections#admin). | -| `preview` | Function to generate preview URLS within the Admin panel that can point to your app. [More](/docs/collections#preview). | -| `hooks` | +| `hooks` | Entry points to "tie in" to Collection actions at specific points. [More](/docs/hooks/config#collection-hooks) | +| `access` | Provide access control functions to define exactly who should be able to do what with Documents in this Collection. [More](/docs/access-control/config/#collections) | +| `auth` | Specify options if you would like this Collection to feature authentication. For more, consult the [Authentication](/docs/authentication/config) documentation. | +| `upload` | Specify options if you would like this Collection to support file uploads. For more, consult the [Uploads](/docs/uploads/config) documentation. | -#### Simple example +#### Simple collection example ```js const Order = { @@ -44,11 +46,63 @@ const Order = { } ``` -#### Full examples +#### More collection config examples You can find an assortment of [example collection configs](https://github.com/payloadcms/payload/blob/master/demo/collections) in the Payload source code on GitHub. ### Admin options +You can customize the way that the Admin panel behaves on a collection-by-collection basis by defining the `admin` property on a collection's config. + +| Option | Description | +| ---------------------------- | -------------| +| `useAsTitle` | Specify a top-level field to use for a document title throughout the Admin panel. If no field is defined, the ID of the document is used as the title. | +| `defaultColumns` | Array of field names that correspond to which columns to show by default in this collection's List view. | +| `disableDuplicate ` | Disables the "Duplicate" button while editing documents within this collection. | +| `enableRichTextRelationship` | The [Rich Text](/docs/fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set this field to `true` to enable the collection to be selected within it. | +| `preview` | Function to generate preview URLS within the Admin panel that can point to your app. [More](/docs/collections#preview). | +| `components` | Swap in your own React components to be used within this collection. [More](/docs/admin/components#collections) | ### Preview + +Collection `admin` options can accept a `preview` function that will be used to generate a link pointing to the frontend of your app to preview data. + +If the function is specified, a Preview button will automatically appear in the corrresponding collection's Edit view. Clicking the Preview button will link to the URL that is generated by the function. + +The preview function accepts the document being edited as an argument. + +**Example collection with preview function:** + +```js +{ + slug: 'posts', + fields: [ + { + name: 'slug', + type: 'text', + required: true, + } + ] + admin: { + preview: (doc) => { + if (doc?.slug) { + return `https://bigbird.com/preview/posts/${doc.slug}`, + } + + return null; + } + } +} +``` + +### Access control + +You can specify extremely granular access control (what users can do with documents in a collection) on a collection by collection basis. To learn more, go to the [Access Control](/docs/access-control/config) docs. + +### Hooks + +Hooks are a powerful way to extend collection functionality and execute your own logic, and can be defined on a collectiion by collection basis. To learn more, go to the [Hooks](/docs/hooks/config) documentation. + +### Field types + +Collections support all field types that Payload has to offer—including simple fields like text and checkboxes all the way to more complicated layout-building field groups like Blocks. [Click here](/docs/fields/config) to learn more about field types. diff --git a/docs/Configuration/express.mdx b/docs/Configuration/express.mdx index 339a025cfa..52e41e8cca 100644 --- a/docs/Configuration/express.mdx +++ b/docs/Configuration/express.mdx @@ -4,7 +4,31 @@ label: Express order: 60 --- -Talk about the Express configuration options here. +Payload utilizes a few Express-specific middleware packages within its own routers. You can customize how they work by passing in configuration options to the main Payload config's `express` property. + +### JSON + +`express.json()` is used to parse JSON body content into JavaScript objects accessible on the Express `req`. Payload allows you to customize all of the `json` method's options. Common examples of customization use-cases are if your JSON body exceeds the default of `2MB` in size. + +**Example config for how to increase the max JSON size allowed to be sent to Payload endpoints:** + +```js +{ + serverURL: 'http://localhost:3000', + express: { + json: { + limit: '4mb', + } + } +} +``` + +You can find a list of all available options that are able to be passed to `express.json()` [here](https://expressjs.com/en/api.html). + +### Compression + +Payload uses the `compression` package to optimize transfer size for all of the routes it opens, and you can pass customization options through the Payload config. Typically, the default options for this package are suitable. + +However, for a list of all available customization options, [click here](http://expressjs.com/en/resources/middleware/compression.html). + -- JSON (limit) -- Compression - takes all options as specified [here](http://expressjs.com/en/resources/middleware/compression.html) diff --git a/docs/Configuration/globals.mdx b/docs/Configuration/globals.mdx index 30e66590b2..9d5a21b153 100644 --- a/docs/Configuration/globals.mdx +++ b/docs/Configuration/globals.mdx @@ -4,4 +4,69 @@ label: Globals order: 30 --- -Talk about how to write Globals configs here. +Global configs are in many ways similar to [Collections](/docs/configuration/collections). The big difference is that Collections will potentially contain *many* documents, while a Global is a "one-off". Globals are perfect for things like header nav, site-wide banner alerts, app-wide localized strings, and other "global" data that your site or app might rely on. + +As with Collection configs, it's often best practice to write your Globals in separate files and then import them into the main Payload config. + +## Options + +| Option | Description | +| ---------------- | -------------| +| `slug` | Unique, URL-friendly string that will act as an identifier for this Global. | +| `label` | Singular label for use in identifying this Global throughout Payload. | +| `fields` | Array of field types that will determine the structure and functionality of the data stored within this Global. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. | +| `admin` | Admin-specific configuration. See below for [more detail](/docs/globals#admin). | +| `hooks` | Entry points to "tie in" to collection actions at specific points. [More](/docs/hooks/config#global-hooks) | +| `access` | Provide access control functions to define exactly who should be able to do what with this Global. [More](/docs/access-control/config/#globals) | +| `auth` | Specify options if you would like this collection to feature authentication. For more, consult the [Authentication](/docs/authentication/config) documentation. | +| `upload` | Specify options if you would like this collection to support file uploads. For more, consult the [Uploads](/docs/uploads/config) documentation. | + +#### Simple Global example + +```js +const Nav = { + slug: 'nav', + label: 'Nav', + fields: [ + { + name: 'items', + type: 'array', + required: true, + maxRows: 8, + fields: [ + { + name: 'page', + label: 'Page', + type: 'relationship', + relationTo: 'pages', // "pages" is the slug of an existing collection + required: true, + } + ] + }, + ] +} +``` + +#### More Global config examples + +You can find an assortment of [example Global configs](https://github.com/payloadcms/payload/blob/master/demo/globals) in the Payload source code on GitHub. + +### Admin options + +You can customize the way that the Admin panel behaves on a Global-by-Global basis by defining the `admin` property on a Global's config. + +| Option | Description | +| ---------------------------- | -------------| +| `components` | Swap in your own React components to be used within this Global. [More](/docs/admin/components#globals) | + +### Access control + +As with Collections, you can specify extremely granular access control (what users can do with this Global) on a Global-by-Global basis. However, Globals only have `update` and `read` access control due to their nature of only having one document. To learn more, go to the [Access Control](/docs/access-control/config) docs. + +### Hooks + +Globals also fully support a smaller subset of Hooks. To learn more, go to the [Hooks](/docs/hooks/config) documentation. + +### Field types + +Globals support all field types that Payload has to offer—including simple fields like text and checkboxes all the way to more complicated layout-building field groups like Blocks. [Click here](/docs/fields/config) to learn more about field types. diff --git a/docs/Configuration/hooks.mdx b/docs/Configuration/hooks.mdx deleted file mode 100644 index 46e9bdf48e..0000000000 --- a/docs/Configuration/hooks.mdx +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Payload-wide Hooks -label: Hooks -order: 80 ---- - -Talk about hooks here. Currently only afterError. - diff --git a/docs/Configuration/localization.mdx b/docs/Configuration/localization.mdx index 5945986733..c27ff81d4a 100644 --- a/docs/Configuration/localization.mdx +++ b/docs/Configuration/localization.mdx @@ -4,4 +4,128 @@ label: Localization order: 50 --- -Talk about Localization here. +Payload features deep field-based localization support. Maintaining as many locales as you need is easy. All localization support is opt-in by default. To do so, follow the two steps below. + +### Enabling in the Payload config + +Add the `localization` property to your Payload config to enable localization project-wide. You'll need to provide a list of all locales that you'd like to support as well as set a few other options. + +**Example Payload config set up for localization:** + +```js +{ + serverURL: 'http://localhost:3000', + collections: [ + ... // collections go here + ], + localization: { + locales: [ + 'en', + 'es', + 'de', + ], + defaultLocale: 'en', + fallback: true, + }, +} +``` + +**Here is a brief explanation of each of the options available within the `localization` property:** + +**`locales`** + +Array-based list of all locales that you would like to support. These strings do not need to be in any specific format. It's up to you to define how to represent your locales. Common patterns are to use two-letter ISO 639 language codes or four-letter language and country codes (ISO 3166‑1) such as `en-US`, `en-UK`, `es-MX`, etc. + +**`defaultLocale`** + +Required string that matches one of the locales from the array provided. By default, if no locale is specified, documents will be returned in this locale. + +**`fallback`** + +Boolean enabling "fallback" locale functionality. If a document is requested in a locale, but a field does not have a localized value corresponding to the requested locale, then if this property is enabled, the document will automatically fall back to the fallback locale value. If this property is not enabled, the value will not be populated. + +### Field by field localization + +Payload localization works on a **field** level—not a document level. In addition to configuring the base Payload config to support localization, you need to specify each field that you would like to localize. + +**Here is an example of how to enable localization for a field:** + +```js +{ + name: 'title', + label: 'Page Title', + type: 'text', + // highlight-start + localized: true, + // highlight-end +} +``` + +With the above configuration, the `title` field will now be saved in the database as an object of all locales instead of a single string. + +All field types with a `name` property support the `localized` property—even the more complex field types like `array`s and `block`s. + + + Note:
+ Enabling localization for field types that support nested fields will automatically create localized "sets" of all fields contained within the field. For example, if you have a page layout using a blocks field type, you have the choice of either localizing the full layout, by enabling localization on the top-level blocks field, or only certain fields within the layout. + + +### Retrieving localized docs + +When retrieving documents, you can specify which locale you'd like to receive as well as which fallback locale should be used. + +##### REST API + +REST API locale functionality relies on URL query parameters. + +**`?locale=`** + +Specify your desired locale by providing the `locale` query parameter directly in the endpoint URL. + +**`?fallback-locale=`** + +Specify fallback locale to be used by providing the `fallback-locale` query parameter. This can be provided as either a valid locale as provided to your base Payload config, or `'null'`, `'false'`, or `'none'` to disable falling back. + +**Example:** + +``` +fetch('https://localhost:3000/api/pages?locale=es&fallback-locale=none'); +``` + +##### GraphQL API + +In the GraphQL API, you can specify `locale` and `fallbackLocale` args to all relevant queries and mutations. + +The `locale` arg will only accept valid locales, but locales will be formatted automatically as valid GraphQL enum values (dashes or special characters will be converted to underscores, spaces will be removed, etc.). If you are curious to see how locales are auto-formatted, you can use the [GraphQL playground](/docs/graphql/playground). + +The `fallbackLocale` arg will accept valid locales as well as `none` to disable falling back. + +**Example:** + +```graphql +query { + Posts(locale: de, fallbackLocale: none) { + docs { + title + } + } +} +``` + + + In GraphQL, specifying the locale at the top level of a query will automatically apply it throughout all nested relationship fields. You can override this behavior by re-specifying locale arguments in nested related document queries. + + +##### Local API + +You can specify `locale` as well as `fallbackLocale` within the Local API as well as properties on the `options` argument. The `locale` property will accept any valid locale, and the `fallbackLocale` property will accept any valid locale as well as `'null'`, `'false'`, `false`, and `'none'`. + +**Example:** + +```js +const posts = await payload.find({ + collection: 'posts', + locale: 'es', + fallbackLocale: false, +}) +``` diff --git a/docs/Configuration/overview.mdx b/docs/Configuration/overview.mdx index 787bb3586d..6ad4975d06 100644 --- a/docs/Configuration/overview.mdx +++ b/docs/Configuration/overview.mdx @@ -4,9 +4,9 @@ label: Overview order: 10 --- -The Payload config is central to everything that Payload does. It scaffolds the data that Payload stores as well as maintains custom React components, hook logic, custom validations, and much more. The config itself and all of its dependencies are run through Babel, so you can take full advantage newer JavaScript features and even directly import React components containing JSX. +Payload is a *config-based*, code-first CMS and application framework. The Payload config is central to everything that Payload does. It scaffolds the data that Payload stores as well as maintains custom React components, hook logic, custom validations, and much more. The config itself and all of its dependencies are run through Babel, so you can take full advantage of newer JavaScript features and even directly import React components containing JSX. -It's also strongly typed with TypeScript, which means that even if you aren't using TypeScript to build your project, your IDE (such as VSCode) may still provide helpful information like typeahead suggestions. +Also, because the Payload source code is fully written in TypeScript, its configs are strongly typed—meaning that even if you aren't using TypeScript to build your project, your IDE (such as VSCode) may still provide helpful information like typeahead suggestions while you write your config. Important:
This file is included in the Payload admin bundle, so make sure you do not embed any sensitive information. @@ -28,7 +28,7 @@ The Payload config is central to everything that Payload does. It scaffolds the | `maxDepth` | The maximum allowed depth to be permitted application-wide. This setting helps prevent against malicious queries. Defaults to `10`. | | `upload` | Base Payload upload configuration. [More](/docs/admin/upload#global). | | `routes` | Control the routing structure that Payload binds itself to. Specify `admin`, `api`, `graphQL`, and `graphQLPlayground`. | -| `paths` | Specific paths used to override Payload functionality. [More](/docs/configuration/paths) | +| `paths` | Specific paths used to override Payload functionality. Currently used to allow for the customization and theming of the Payload admin panel, although more uses will come over time. [More](/docs/admin/customizing-scss) | | `email` | Base email settings to allow Payload to generate email such as Forgot Password requests and other requirements. [More](/docs/email/overview#config) | | `express` | Express-specific middleware options such as compression and JSON parsing. [More](/docs/configuration/express). | | `debug` | Enable to expose more detailed error information. | diff --git a/docs/Configuration/paths.mdx b/docs/Configuration/paths.mdx deleted file mode 100644 index 09dd0134e4..0000000000 --- a/docs/Configuration/paths.mdx +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Paths -label: Paths -order: 80 ---- - -Talk about Paths that can be defined here. Currently only SCSS. - diff --git a/docs/Fields/richText.mdx b/docs/Fields/richText.mdx new file mode 100644 index 0000000000..78b36cc785 --- /dev/null +++ b/docs/Fields/richText.mdx @@ -0,0 +1,7 @@ +--- +title: Rich Text Field +label: Rich Text +order: 20 +--- + +get out diff --git a/docs/GraphQL/playground.mdx b/docs/GraphQL/playground.mdx new file mode 100644 index 0000000000..b22d03bde4 --- /dev/null +++ b/docs/GraphQL/playground.mdx @@ -0,0 +1,11 @@ +--- +title: Using the GraphQL Playground +label: Playground +order: 30 +--- + +Talk about the GraphQL Playground + +Talk about how to enable / disable it in production + +Talk about how to log in diff --git a/docs/Hooks/config.mdx b/docs/Hooks/config.mdx index 0ab1f56b9b..48bda52872 100644 --- a/docs/Hooks/config.mdx +++ b/docs/Hooks/config.mdx @@ -12,10 +12,15 @@ order: 10 ## Hook Types +- [Payload Hooks](#payload-hooks) - [Collection Hooks](#collection-hooks) - [Field Hooks](#field-hooks) - [Error Hook](#error-hook) +## Payload Hooks + +Discuss the afterError hook here, including how it is only used in REST API currently. + ## Collection Hooks Collection can be executed at any point in the modification or retrieval of a collection. diff --git a/docs/getting-started/installation.mdx b/docs/getting-started/installation.mdx index 811197a19c..08f117fa82 100644 --- a/docs/getting-started/installation.mdx +++ b/docs/getting-started/installation.mdx @@ -34,9 +34,9 @@ export default buildConfig({ }); ``` -Write the above code into your newly created config file. This baseline config will automatically provide you with a default `User` collection. For more information about users and authentication, jump to the [Authentication](/docs/authentication/config) section. +Write the above code into your newly created config file. This baseline config will automatically provide you with a default `User` collection. For more information about users and authentication, including how to provide your own user config, jump to the [Authentication](/docs/authentication/config) section. -Although this is just the bare minimum config, there are *many* more options that you can control here. To reference the full config and all of its options, [click here](/docs/configuration/main). +Although this is just the bare minimum config, there are *many* more options that you can control here. To reference the full config and all of its options, [click here](/docs/configuration/overview). ### Server @@ -56,7 +56,7 @@ app.listen(3000, async () => { }); ``` -This server doesn't do anything just yet. But, after you have this in place, we can initialize Payload via its `init()` method, which accepts a small set of arguments to tell it how to operate. For a full list of `init` arguments, please consult the [main configuration](/docs/configuration/main#init) docs. +This server doesn't do anything just yet. But, after you have this in place, we can initialize Payload via its `init()` method, which accepts a small set of arguments to tell it how to operate. For a full list of `init` arguments, please consult the [main configuration](/docs/configuration/overview#init) docs. To initialize Payload, update your `server.js` file to reflect the following code: diff --git a/src/admin/scss/app.scss b/src/admin/scss/app.scss index 661d36ac9b..391c10d0bb 100644 --- a/src/admin/scss/app.scss +++ b/src/admin/scss/app.scss @@ -124,3 +124,5 @@ dialog { .payload__modal-item--enterDone { z-index: $z-modal; } + +@import '~payload-user-css'; diff --git a/src/admin/scss/custom.css b/src/admin/scss/custom.css new file mode 100644 index 0000000000..02370a8ab6 --- /dev/null +++ b/src/admin/scss/custom.css @@ -0,0 +1 @@ +/* Used as a placeholder for when the Payload app does not have custom CSS */ diff --git a/src/admin/scss/overrides.scss b/src/admin/scss/overrides.scss index e69de29bb2..0b6a709cf2 100644 --- a/src/admin/scss/overrides.scss +++ b/src/admin/scss/overrides.scss @@ -0,0 +1 @@ +/* Used as a placeholder for when the Payload app does not have custom SCSS */ diff --git a/src/config/defaults.ts b/src/config/defaults.ts index c318762388..208199e443 100644 --- a/src/config/defaults.ts +++ b/src/config/defaults.ts @@ -14,6 +14,8 @@ export const defaults = { disable: false, indexHTML: path.resolve(__dirname, '../admin/index.html'), components: {}, + css: path.resolve(__dirname, '../admin/scss/custom.css'), + scss: path.resolve(__dirname, '../admin/scss/overrides.scss'), }, upload: {}, email: { @@ -44,7 +46,4 @@ export const defaults = { }, hooks: {}, localization: false, - paths: { - scss: path.resolve(__dirname, '../admin/scss/overrides.scss'), - }, }; diff --git a/src/config/schema.ts b/src/config/schema.ts index 6d9f50f351..e5c56417df 100644 --- a/src/config/schema.ts +++ b/src/config/schema.ts @@ -31,6 +31,8 @@ export default joi.object({ }), disable: joi.bool(), indexHTML: joi.string(), + css: joi.string(), + scss: joi.string(), components: joi.object() .keys({ Nav: component, @@ -109,10 +111,4 @@ export default joi.object({ hooks: joi.object().keys({ afterError: joi.func(), }), - paths: joi.object() - .keys({ - configDir: joi.string(), - config: joi.string(), - scss: joi.string(), - }), }); diff --git a/src/config/types.ts b/src/config/types.ts index c57aa7a4e7..0939e8b2e2 100644 --- a/src/config/types.ts +++ b/src/config/types.ts @@ -62,6 +62,8 @@ export type PayloadConfig = { } disable?: boolean; indexHTML?: string; + css?: string + scss?: string components?: { Nav?: React.ComponentType Account?: React.ComponentType diff --git a/src/webpack/getBaseConfig.ts b/src/webpack/getBaseConfig.ts index e178f2b392..0b31980e16 100644 --- a/src/webpack/getBaseConfig.ts +++ b/src/webpack/getBaseConfig.ts @@ -54,7 +54,8 @@ export default (config: Config): Configuration => ({ alias: { 'payload/config': config.paths.config, '@payloadcms/payload$': mockModulePath, - 'payload-scss-overrides': config.paths.scss, + 'payload-user-css': config.admin.css, + 'payload-scss-overrides': config.admin.scss, dotenv: mockDotENVPath, }, extensions: ['.ts', '.tsx', '.js', '.json'],