不允许SASS变量的汇总

Question

我试图在我的汇总配置中设置一个SASS结构，允许我在整个应用程序中使用变量。我想用POSTSS自动刷新器。我在插件阵列中设置了以下内容：

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，然后对它运行postcss SASS，但似乎不是这样。




Answer 1

这对我很有用：

苗条的配置。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' }
                })
            ]
        }),

应用程序。苗条的

<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);
            }
        }),

最酷的是我的主打。scss文件可以导入部分。

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

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