create-react-app内使用less

[Pieces312]

最近开始学react，使用create-react-app创建项目时，发现它默认不支持less。然后这篇文章记录关于在create-react-app中配置less的步骤。

1. 暴露配置文件

create-react-app生成的项目文件是看不到webpack的配置文件，首先需要先暴露出来，使用下面的命令：

  npm run eject

（ 注意：如果你在用create-react-app创建文件的时候，执行了git init这段代码，你就必须先将里面的文件提交一次之后再执行npm run eject，否则会报错。或者你直接找到你创建的那个文件，将里面的.git文件夹删掉就好了）

2. 安装less-loader和less

  npm install less-loader less --save-dev

3. 修改webpack配置文件

修改webpack.config.dev.js和webpack.config.prod.js 两个配置文件

• 改动1：

       在exclude数组里面将 /\.css&/ 改为 /\.(css|less)&/ ;（如果没有就添加）
  

• 改动2：

       test:  /\.css&/ 改为 /\.(css|less)$/     
       test:  /\.css&/ 的use数组配置添加less-loader
  

最后，改好之后执行npm start 如果成功了就说明less配置成功了。

附上原网址： https://segmentfault.com/a/1190000010162614