在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 standalone时，我会将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文件，同时使用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, '../../') 
     } 
     }) 
    ] 
...