在CSS模块中使用SCSS变量

Question

我有一个_color.scss文件，其中包含400种颜色作为变量。 我喜欢20个需要在其样式中使用此颜色变量的组件。

我正在使用SCSS + CSS模块构造样式。 截至目前，我导入此_color.scss在每一个组件的style.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来做类似的事情？ 一个声明全局变量的地方？

Answer 1

我现在使用的方式看起来很干净。 因此，我正在与所有人分享。

使用sass-resources-loader

这将包括@import所有的.scss文件进行跨所有可用的变量和混入scss同时使用文件css modules 。

webpack@2.xx配置

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