create-react-app裏添加less

https://www.cnblogs.com/jayxiangnan/p/9116663.html

如何在create-react-app建立的項目下配置less，其實很簡單，只是create-react-app建立的項目沒有暴露webpack相關配置，因此須要暴露出webpack相關配置，具體操做以下：

1、暴露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

2、修改webpack文件配置

一、修改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)$/, ] } } 

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

操做和webpack.config.dev.js相同，再也不贅述~