Svelte styles in preprocess not include in build.css

Question

I am creating an app in Svelte and I have a problem with styles. I preprocess imports in style tags using the rollup.config.js file, not with svelte-preprocess, but with rollup-plugin-svelte preprocess. I do it following the example of the official docs. https://svelte.dev/docs#svelte_preprocess

Everything works fine, in the sass return code: css.toString(); I get the css code from my imports, but the result is not added to my bundle.css, it just disappears.

What am I missing?

My rolling.config.js is:

...
...
    plugins: [
        svelte({

            dev: !production,

            css: css => {
                css.write('public/build/bundle.css');

            },
            preprocess: {
                style: async ({ content, attributes, filename }) => {
                    // only process <style lang="sass">
                    if (attributes.lang !== 'sass') return;

                    const { css, stats } = await new Promise((resolve, reject) => sass.render({
                        file: filename,
                        data: content,
                        includePaths: [
                            path.dirname(filename),
                            './node_modules',
                        ],
                    }, (err, result) => {
                        if (err) reject(err);
                        else resolve(result);
                    }));
                    return {
                        code: css.toString(),                   // this works
                        dependencies: stats.includedFiles
                    };
                }
            },
        }),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
...
...

In one of my .svelte files

<style lang="sass">
  @import './styles/App.scss';

</style>

All other styles without the lang = "sass" attribute are not preprocessed and are added to the bundle.css file.

I'm blocked, does anyone help me?

JeffProd JeffProd · Accepted Answer · 2020-05-26T19:52:18

Add emitCss: true in svelte(..) like this :

svelte({
  dev: !production,
  emitCss: true, // without this, <style> in components are not included in bundle
  css: css => {
    css.write('public/build/bundle.css')
  }
}),

This will emit CSS as "files" for other plugins to process.

Svelte styles in preprocess not include in build.css

1 Answers