在CSS模块中使用SCSS变量

Question

我有一个名为_color.scss的文件，其中包含400个颜色变量。而我有大约20个组件需要在其样式中使用这些颜色变量。

我正在使用SCSS + CSS模块来构建我的样式。目前，我在每个组件的style.scss中都导入了这个_color.scss。

例如：

component1.scss

@import "color.scss";

component2.scss

@import "color.scss";

component3.scss

@import "color.scss";

之前，我使用独立的SCSS时，会将color.scss导入到我的index.scss中，并在其下面导入所有其他样式。通过这样做，变量将在所有组件中可用。

示例：

//index.scss
@import "color.scss";
@import "component1.scss";
@import "component2.scss";
@import "component3.scss";

现在，_color.scss 下的所有变量都将在 component1.scss、component2.scss 和 component3.scss 中可用。

是否有一种类似于 CSS Modules + SCSS 的方法来声明全局变量的单个位置？

- Pranesh Ravi

Answer 1

我现在使用的方法看起来非常干净。因此，我想与大家分享。

使用sass-resources-loader

这将在所有的.scss文件中包含@import，使得变量和mixin在使用css modules时可以跨所有scss文件使用。

webpack@2.x.x配置

...
    module: {
      rules: [
        {
          test: /\.scss$/,
          loaders: [
            'style-loader',
            'css-loader?modules&importLoaders=1&localIdentName=[path][name]__[local]__[hash:base64:10]',
            'sass-loader',
            'sass-resources-loader',
            'import-glob-loader',
            'postcss-loader',
          ],
        },
     },
     plugins: [
       new webpack.LoaderOptionsPlugin({
        options: {
          postcss: [
            autoprefixer(),
          ],
          sassResources: [
            './app/constants/_style-variables.scss', //include your scss imports here
          ],
          context: path.resolve(__dirname, '../../')
        }
      })
     ]
...

- Pranesh Ravi