diff --git a/docs/preprocessors/other-css-preprocessors.md b/docs/preprocessors/other-css-preprocessors.md index 1952f1d13..bab9f59b6 100644 --- a/docs/preprocessors/other-css-preprocessors.md +++ b/docs/preprocessors/other-css-preprocessors.md @@ -13,6 +13,24 @@ export default { preprocess: sveltePreprocess({ postcss: true }) }; Note that this assumes that you have a ESM-style project, which means there's `"type": "module"` in your project's `package.json`. If not, you need to use CommonJS in your `svelte.config.js`, things like `import ...` or `export const ...` are not allowed. You then also switch the `postcss.config` `cjs` file ending to `js`. +If your `svelte.config.js` is not in the workspace root (for example your `svelte.config.js` is within `/frontend`), you'll have to pass in the `configFilePath` config. This is because the relative path is resolved relative to the working directory of the node process. + +```js +import sveltePreprocess from 'svelte-preprocess'; +import { dirname, join } from 'path'; +import { fileURLToPath } from 'url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +export default { + preprocess: sveltePreprocess({ + postcss: { + configFilePath: join(__dirname, 'postcss.config.cjs') + } + }) +}; +``` + 2. Either add `lang="postcss"` to each of your `