配置create-react-app支持less

Posted on   |   In   |     |  

  使用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,
},

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