create-react-app怎么定义全局scss变量

Question

最近利用create-react-app创建了一个项目，因为项目主题风格多样，所以需要多个样式文件进行风格定义。

最初想的是定义一个css文件，通过命名的区分(.base_background:#ff0000;)，在需要使用的位置引入，不过这种方法太麻烦了，除了元素自己的类名，还需要另外加类名（相当多的类名）。而且每个组件都要引入主题样式文件，增加了冗余。

然后开始尝试全局定义scss，想通过变量语法进行主题样式控制，看到一篇vue的文章，可以通过sass-resources-loader进行变量引入，而不需要每个组件单独引入scss文件。vue引入sass全局变量

多番尝试后，没有成功将其在react中实现。求教哪位有过类似操作，指点一下。感谢！

Answer 1

我知道，哈哈
这是我的项目结构

首先需要npm i sass-resources-loader --save-dev
然后需要在webpack.config.dev中修改一下

注意是./src**
最后你需要在App.js中引入定义全局变量的scss文件，这样你就可以在所有的scss文件中使用common.scss中定义的变量了，不需要每次都引入common.scss。
App.js文件如下

万事大吉了，哈哈

Answer 2

我也遇到跟你一样的问题，请问你这边解决了么？

Answer 3

https://blog.csdn.net/Beamon_...
亲测有效

Answer 4

cnpm i sass-resources-loader --save-dev

webpack.config.js 447

.concat([ { loader: "sass-resources-loader", options: { resources: path.join(__dirname, "../src/assets/css/${name}.scss") } } ])

Answer 5

{
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader',
                {
                  loader: 'sass-resources-loader',
                  options: {
                    resources: '../src/assets/styles/namespace.scss',
                  },
                },
              ),
            },

create-react-app eject后，这样不行呀