配置create-react-app支持less

  使用create-react-app初始化出来的项目默认是不支持less的,对于一些习惯于用less的人来说就不太方便了,现在记录下来改造的方法,使其可以支持less。

安装依赖项

1
npm install --save-dev less less-loader

修改react-scripts中的webpack配置

我这里使用的react-scripts的版本是2.1.3,修改的webpack文件地址位于node_modules/react-scripts/config/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
修改第48行
将const cssRegex = /\.css$/;修改为const cssRegex = /\.(css|less)$/;
修改第441行开始
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}, 'less-loader'), // 主要是修改这里,在这里将less-loader加上
// 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,
},

这样不方便的就是需要手动进行这个操作,所以就是在项目刚开始的时候注意下,配置好以后就可以了~

热评文章