如何在react項目中配置less

如何在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相同，不再贅述~