sveltejs / svelte-preprocess

A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
MIT License
1.76k stars 151 forks source link

manual configuration vs auto #432

Open basaran opened 2 years ago

basaran commented 2 years ago

Hello,

I was able to configure postcss and scss to work together in my sveltekit project.

preprocess: {
        postcss: true,
        scss: {
            ....
        },
    },

and I have my postcss.config.js loading plugins. Everything is fine. Scss files get compiled first, and postcss does it's thing.

But when I tried to run preprocess manually in my svelte.config.js like this:

preprocess: {
        scss: {
            ....
        },
    },

and in config.kit part of the config:

    preprocess: [
        preprocess(options.preprocess),
        preprocess.postcss({ plugins: postcssPlugins }),
        mdsvex(mdsvexConfig),
    ],

postcss doesn't pick up the styles from my scss files. Only the component specific styles are post processed. What is the difference here? Is there something I can do, so this behaves the same way like the auto config? (I found a sequential preprocess package, but that didn't produce the output I seek)

The reason I need this is because I need to read a certain configuration key inside svelte.config.js (paths.base) and have postcss do something about it (rewrite urls). So I figured I should just get rid of the postcss.config.cjs and use one config file.

I understand I can always outsource the path.kit value and import in both files, but I already spend 5 hours troubleshooting this so :) Thank you for your time.

felixsanz commented 2 years ago

bump, i have a problem with this too