本文主要写如何在 React 中引入 less 。因为 less 和 css 非常像，因此很容易学习。而且 less 仅对 css 语言增加了少许方便的扩展，这就是 less 如此易学的原因之一。

1.安装 less

npm install less less-loader --save-dev复制代码

2.暴露 webpack 文件

利用 npx create-react-app  搭建的 React 项目，默认隐藏 webpack 配置文件，引入 less 需要修改 webpack 配置文件，因此我们需要执行命令暴露 webpack 配置文件。

这里需要注意，一旦暴露，无法回退。

npm run eject复制代码

如果这一步失败，执行下列命令：

git add .

git commit -m "init"复制代码

然后再执行 npm run eject

3.修改 wenpack.config.js 配置

在合适的位置添加：

// 放在 // const sassRegex = /\.(scss|sass)$/;// const sassModuleRegex = /\.module\.(scss|sass)$/; // 后面const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/;复制代码
// 放在 oneof 数组下{  test: lessRegex,  exclude: lessModuleRegex,  use: getStyleLoaders(
    {      importLoaders: 2,      sourceMap: isEnvProduction && shouldUseSourceMap,
    },'less-loader'
  ),  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},// Adds support for CSS Modules, but using SASS// using the extension .module.scss or .module.sass{  test: lessModuleRegex,  use: getStyleLoaders(
    {      importLoaders: 2,      sourceMap: isEnvProduction && shouldUseSourceMap,      modules: true,      getLocalIdent: getCSSModuleLocalIdent,
    },'less-loader'
  ),
},复制代码

4.如何使用 less

新建一个 App.less 文件，然后在 App.js 中引入：

import './Map.less'复制代码