react sass scss设置全局变量全局函数

react 默认支持sass 因为sass比less强大 支持全局函数

• 1.安装 sass-resources-loader

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

• 2.暴露配置文件 npm run eject
• 3.修改 config 里面的 webpack.config.js

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

在 getStyleLoaders后面添加如下代码

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

最终代码如下

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'sass-loader',
              ).concat({
                  loader: 'sass-resources-loader',
                  options: {
                      resources: [
                          // 这里按照你的文件路径填写
                          path.resolve(__dirname, './../src/common.scss')
                      ]
                  }
              }),

'./../src/common.scss' 这个是我的公共的sass路径 根据你自己的来配置

改成你自己的路径
我的全局函数

• 4.接下来重启就可以了