react踩坑100次之一脚手架react-create-app版本2.1.1引入less

(1).暴露webpack

create-react-app脚手架一开始是不会暴露webpack配置的，需要手动暴露：

npm run eject

(2).运行之后，会增加几个文件：

dev 开发环境配置
prod生产环境配置
server本地服务器
(3).添加less模块

在项目根目录 使用 npm 或者 yarn 来安装 less 和 less-loader,我这里使用的是 yarn

yarn add less less-loader

(4). 修改webpack配置文件webpack.config.js

test: /.css/
test: /.css$/ 的 use 数组配置增加 less-loader

image.png

image.png

将loader放在后面，因为webpack从后向前解析，先less-loader 再postcss 再css 再style逐次解析

重新运行项目，引入less，就可以使用了。