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.接下来重启就可以了

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

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

推荐阅读更多精彩内容