React16.8脚手架配置less

1.首先在项目根目录下载lessless-loader

yarn add less less-loader

2.暴露webpack配置文件

yarn eject

3.找到config目录下的webpack.config.js文件
因为React默认支持sass,所以只需要把sass的配置方法复制一份改成less然后重启项目就行了。
首先搜索:const sass
然后加上

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

结果如图

接着搜索:test: sass
然后在后面加上

{
    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'
              ),
},

接着重启项目就好了

你可能感兴趣的:(React16.8脚手架配置less)