汇总不允许 SASS 变量答案

【问题标题】：Rollup not allowing SASS variables汇总不允许 SASS 变量
【发布时间】：2020-07-24 10:14:16
【问题描述】：

我正在尝试在我的汇总配置中设置一个 SASS 结构，以允许我在整个应用程序中使用变量。我想使用 postcss + autoprefixer。我在我的插件数组中设置了以下内容：

postcss({
    modules: false,
    extensions: ['.css', '.sass', '.scss'],
    output: false,
    extract: true,
    plugins: [autoprefixer],
    use: [
      [
        'sass', {
          includePaths: [path.join(__dirname, 'scss')]
        }
      ]
    ]
})

效果很好，我可以在我的组件中导入我的 SCSS 文件，即。 import "./App.scss";.

我面临的问题是我在 App.scss 中声明了许多全局变量，我想在子组件中导入的组件中使用这些变量。

我该怎么做呢？我以为这个插件会解决所有的 SCSS，concat 然后对它运行 postcss + SASS，但似乎情况并非如此。

【问题讨论】：

in components that are imported in children 是什么意思？ Sass 导入？

标签： rollup postcss

【解决方案1】：

在这里添加我的 github 评论： https://github.com/sveltejs/language-tools/issues/232#issuecomment-801549706

这对我有用：

svelte.config.js


module.exports = {
  preprocess: autoPreprocess({
    scss: {  prependData: `@import 'src/styles/main.scss';`},
    postcss: { plugins: [require('autoprefixer')] }
  }),
 #};

rollup.config.js

svelte({
            dev: !production, // run-time checks      
            // Extract component CSS — better performance
            css: css => css.write(`bundle.css`),
            hot: isNollup,
            preprocess: [
                autoPreprocess({
                    scss: { prependData: `@import 'src/styles/main.scss';`},
                    postcss: { plugins: [postcssImport()] },
                    defaults: { style: 'postcss' }
                })
            ]
        }),

App.svelte

<style global lang="scss">
</style>

如果您希望终端中的错误在 rollup.config.js 上消失

svelte({
            dev: !production, // run-time checks      
            // Extract component CSS — better performance
            css: css => css.write(`bundle.css`),
            hot: isNollup,
            preprocess: [
                autoPreprocess({
                    scss: { prependData: `@import 'src/styles/main.scss';`},
                    postcss: { plugins: [postcssImport()] },
                    defaults: { style: 'postcss' }
                })
            ],
            onwarn: (warning, handler) => {
                const { code, frame } = warning;
                if (code === "css-unused-selector")
                    return;
        
                handler(warning);
            }
        }),

最酷的是我的 main.scss 文件可以导入部分。

@import 'resets';
@import 'border_box';
@import 'colors';
@import 'fonts';
@import 'forms';

此处的文档：https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md

【讨论】：