在react中配置less

235 阅读1分钟

安装less和less-loader

 yarn add less less-loader 

暴露react脚手架配置

 yarn eject

注意此过程不可逆,有的小伙伴走到这一步可能会报错,原因是没有git初始化此时运行

git init
git add .
git commit -m 初始化git仓库

在config>webpack.config.js下加入less配置

// style files regexes
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/

 // Less 解析配置
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap
                },
                'less-loader'
              ),
              sideEffects: true
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'less-loader'
              )
            },

然后重新yarn start就可以使用less

注意——react版本16.10.2