create-react-app里添加less _create

幽沉谢世事，俯默窥唐虞。这篇文章主要讲述create-react-app里添加less相关的知识，希望能为你提供帮助。
如何在create-react-app创建的项目下配置less，其实很简单，只是create-react-app创建的项目没有暴露webpack相关配置，所以需要暴露出webpack相关配置，具体操作如下：
一、暴露webpack,安装lessless-loader依赖
在create-react-app创建的项目下是不支持less的，我们要使用less就需要在相关配置文件中配置。
【create-react-app里添加less】关于less的需要找到两个文件webpack.config.dev.js和webpack.config.prod.js
可是，create-react-app创建的项目是看不到webpack相关的配置文件，所以需要先暴露出来，使用以下命令：

npm run eject

安装less相关依赖

npm install less less-loader --save-dev

二、修改webpack文件配置
1、修改webpack.config.dev.js文件配置

// 在module中做了三处修改 // 第一处是找到 `test: /.css$/` 将其改为`test: /.(css|less)$/` // 第二处是增加 `less-loader`的配置 // 第三处是在exclude属性中增加 `/.(css|less)$/` // 具体修改如下 module: { ... { // test: /.css$/第一处 test: /.(css|less)$/, use: [ require.resolve(‘style-loader‘), ... // 第二处 { loader: require.resolve(‘less-loader‘) } ] }, { exclude: [ /.(js|jsx|mjs)$/, /.html$/, /.json$/, // 第三处 /.(css|less)$/, ] } }

2、修改webpack.config.pro.js文件配置
操作和webpack.config.dev.js相同，不再赘述~