React 配置全局 scss 变量

1、安装 sass-resources-loader

npm i sass-resources-loader --save-dev

2、找到 webpack.config.js，两种选择

（1）暴露配置文件执行 npm run eject，此时会在根目录生成 config 文件夹，里面包含webpack.config.js 配置文件。 （多人项目建议选择执行此命令）
（2）直接修改 node_modules ==》 react-scripts ==》webpack.config.js。 （注意：此文章是采用的这种方式修改的 webpack.config.js）
注意：修改的node_modules/reacr-scripts/config/webpacl.config.js , …/…/…/ 定位到根目录下层级下。如果是npm run eject 的话，需要对应看目录的路径。

3、修改 webpack.config.js

找到以下代码，大约在507行。

{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      'sass-loader'
    ),
    sideEffects: true,
}

在 getStyleLoaders() 后面添加如下代码：

.concat({
     loader: 'sass-resources-loader',
     options: {
         resources: [
             // 这里按照你的文件路径填写
             path.resolve(__dirname, './../src/common.scss')
         ]
     }
 })

4、最终代码如下，需要执行npm start 重新启动项目

{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ).concat({
      loader: 'sass-resources-loader',
      options: {
          resources: [
              // 这里按照你的文件路径填写../../../ 定位到根目录下, 可以引入多个文件
              path.resolve(__dirname, '../../../src/scss/common.scss'),
              path.resolve(__dirname, '../../../src/scss/skin.scss')
          ]
      }
  }),
  sideEffects: true,
},

需要执行npm start 重新启动项目