如何在 React 中引入 less？

本文主要寫如何在 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

注意：暴露 webpack 文件只能在 create-react-app 之初，一旦項目結構發生改變，再進行暴露操作就會失敗。所以儘量在項目建立時就進行 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'

less 語法手冊