在 CSS module中使用 SCSS 变量

IT技术 reactjs sass webpack css-modules react-css-modules
2021-05-10 17:25:47

我有一个_color.scss包含 400 种颜色作为变量的文件。我喜欢 20 个组件，它们的样式需要这种颜色变量。

我正在使用 SCSS + CSS module来构建我的样式。截至目前，我正在_color.scss每个组件的style.scss.

例子：

组件1.scss

@import "color.scss";

组件2.scss

@import "color.scss";

组件3.scss

@import "color.scss";

以前，当我独立使用 SCSS 时，我会将 导入color.scss到 myindex.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？在一个地方声明全局变量？

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, '../../')
        }
      })
     ]
...
其它你可能感兴趣的问题
上一篇react-native-google-places-autocomplete 给它一个值，而不仅仅是默认（初始）值 下一篇箭头函数被认为是使用 babel 的 React 组件中的意外标记