升级react-scripts支持less

前端技术发表留言

在react-scripts中默认是不支持less的，但是由于less的很多优点，我们在项目中做一些修改。

升级版本

原版本：

"react-scripts": "0.9.x",

升级后版本：

"react-scripts": "^4.0.1",

支持less文件编译

要支持less，就需要安装less和less-loader；

npm install less@^4.1.2 less-loader@^5.0.0 -D
# "react-scripts": "^4.0.1", 支持的版本号码
# "less": "^4.1.2",
# "less-loader": "^5.0.0",

react-scripts本来是不支持less的，所以需要重写一部分的配置，需要用到插件react-app-rewired代替react-scripts启动应用。
然后使用customize-cra自定义webpack部分配置注入less-loader；
首先我们先安装相应的插件，上面的less插件也可以先把下面的配置写到package.json后一起安装；

"react-app-rewired": "^2.1.8",
"customize-cra": "^1.0.0",
"less": "^4.1.2",
"less-loader": "^5.0.0",

安装完成，创建配置文件，在项目的根目录创建config-overrides.js文件，写入下面的内容；

const {override, addLessLoader} = require('customize-cra')
module.exports = {
  webpack: (config, env) => override(addLessLoader())(config),
}

修改package.json中的scripts字段，使用react-app-rewired启动；

{
  "start": "PORT=3000 react-app-rewired start",
  "build": "GENERATE_SOURCEMAP=false react-app-rewired build"
}

‍

留下回复