预处理中的精简样式未包含在build.css中

Question

预先感谢。

我正在使用svelte创建一个应用程序，但是样式存在问题。我使用rollup.config.js文件预处理样式标签中的导入，而不是使用svelte预处理，而是使用rollup-plugin-svelte预处理。我按照官方文档的示例进行操作。 https://svelte.dev/docs#svelte_preprocess

一切正常，在sass中返回代码：css.toString（）;我从导入中获取了CSS代码，但是... 结果未添加到我的bundle.css中，它消失了。

我想念的是什么？

我的rolling.config.js是：

...
...
    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']
        }),
...
...

在我的.svelte文件之一中

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

</style>

没有lang =“ sass”属性的所有其他样式都不会经过预处理，而是添加到bundle.css文件中。

我被封锁，有人帮我吗？

再次感谢

Answer 1

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