23 在React中配置less

一. 创建React 工程

npx create-react-app my-app

二.添加less和less-loader 两个依赖库

cnpm install less@3.9.0 --save

cnpm install less-loader@4.1.0  --save

注意：

如果步骤3 在步骤2前先执行，则需要【删除】项目中的package-lock.json后， 重新执行步骤2即可。

三. 弹出配置文件以便自定义项目配置

npm run eject

eject运行报错

解决方式：

git init
git add .
git commit -m 'init'
npm run eject

项目里也多了一个config文件夹：

成功！

四. 打开config/webpack.config.js 文件，开始配置工作

修改style files regexes（样式文件正则）
参照 sass 配置 less 的样式文件正则

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

无.修改getStyleLoaders函数，并添加如下代码

同样，参照css-loader节点，添加less-loader节点

 {
       loader: require.resolve('less-loader'),
       options: lessOptions,
     },

六.模仿代码中提供的sassRegex代码，添加如下代码

// Adds support for LESS Modules, but using LESS 
// less start
{
  test: lessRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
  }),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    modules: true,
    getLocalIdent: getCSSModuleLocalIdent,
  }),
}, // less end;

七、在exclude属性中增加 /\.(css|less)$/

exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/,/\.(css|less)$/,],

八、第二种方式

 // 在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)$/,
      ]
    }
  }