reactjs項目配置sass全局公共樣式

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）

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')
          ]
      }
  }),
  sideEffects: true,
},

'…/…/…/src/scss/common.scss’是我的公共sass路徑，根據你自己的項目路徑來配置。

需要執行npm start 重新啓動項目