React+ Less+Antd 配置 全局变量的解决方案

前言：

在用creat-react-app创建并开发项目的时候，发现在项目根目录下边创建的 global.less, 在根目录下引入 global.less,在开发其他模块的时候，发现 antd的样式 更高于 global.less, 导致好多样式被antd冲掉，并且css3的root写法，在其他组件内var的时候也会报错，感觉global的引入有问题，所以有了以下解决方案

tips

前提是已经配置好基础项目，less的引入之类的，如果没有 可参考 ： juejin.cn/post/702107…

1.安装插件

yarn add style-resources-loader

2.配置webpack

前提是已经 run eject 否则看上面链接文章

查找关键字 lessRegex 在ues内配置

{ loader: 'style-resources-loader', options: { patterns: path.resolve(__dirname, '../src/global.less') } } global.less 即为公用的less，包括一些样式的初始化，公用的东西等 查找关键字 lessModuleRegex 同样配置上述文件

配置后的整体代码，红框框处是 新增的配置项

lessRegex和lessModuleRegex 整理配置代码如下

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: [
                ...getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
                  },
                  'less-loader'
                ),
                {
                  loader: 'style-resources-loader',
                  options: {
                    patterns: path.resolve(__dirname, '../src/global.less')
                  }
                }
              ],
              // 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
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: lessModuleRegex,
              use: [
                ...getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                    modules: {
                      getLocalIdent: getCSSModuleLocalIdent
                    }
                  },
                  'less-loader'
                ),
                {
                  loader: 'style-resources-loader',
                  options: {
                    patterns: path.resolve(__dirname, '../src/global.less')
                  }
                }
              ]
            },

至此，global.less 在全局内生效

global内使用的小技巧

css3的root

在global内配置

:root {
  /* 文字颜色 */
  --clr-white: #fff;
  }

在项目内直接 color: var(--clr-white) 即可

over～～～～