本文共 1097 字，大约阅读时间需要 3 分钟。

如何在create-react-app创建的项目下配置less，其实很简单，只是create-react-app创建的项目没有暴露webpack相关配置，所以需要暴露出webpack相关配置，具体操作如下：

一、暴露webpack,安装less\less-loader依赖

在create-react-app创建的项目下是不支持less的，我们要使用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相同，不再赘述~

转载自：https://www.cnblogs.com/jayxiangnan/p/9116663.html