create-react-app：使用全局样式变量，不需要单个引

亲测可用，定义好后，不需要在每个页面引入，直接使用变量即可

在eject后的webpack.config.js中做如下配置：

image.png

全局样式的路径一定要正确

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                "sass-loader"
              ).concat(
                {
                  loader: 'sass-resources-loader',
                  options: {
                      resources: [
                          // resolve方法第二个参数为scss配置文件地址，如果有多个，就进行依次添加即可
                          path.resolve(__dirname, '../src/styles/main.scss')
                      ]
                  }
              }
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

使用

在styles文件夹中创建一个main.scss,这个文件就是上面配置的* path.resolve(__dirname, '../src/styles/main.scss')*，然后在任意的scss文件中就可以使用main.scss中定义的变量和样式了，避免了在多个scss文件中引入相同的样式文件

image.png