在 React 中使用 .less 文件

Question

我正在尝试将 .less 文件与极简的 React 应用程序（使用create-react-app 创建）一起使用。我已经将less和添加less-loader到我的package.json以及我的webpack.config.js文件中的模块规则。然而，类引用没有被添加到 HTML 元素中（应该有class="customColor"）。

<p>Hello world in a custom color.</p>

我想知道我做错了什么。

应用程序.js

import React from 'react';
import './App.css';
import styles from './custom.less';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p className={styles.customColor}>
          Hello world in a custom color.
        </p>
      </header>
    </div>
  );
}

export default App;

无定制

@custom-color: red;

.customColor {
  color: @custom-color;
}

包.json

{
  "name": "sample",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "less": "^3.10.3",
    "less-loader": "^5.0.0"
  }
}

webpack.config.js

module.exports = {
    rules: [{
        test: /\.less$/,
        use: [{
            loader: 'style-loader',
        }, {
            loader: 'css-loader', // translates CSS into CommonJS
        }, {
            loader: 'less-loader', // compiles Less to CSS
        }],
    }],
}

Answer 1

要在使用create-react-app创建的 React 项目中使用less 文件，请按照以下步骤操作：

1. npm run eject
2. npm i less less-loader
3. 打开位于弹出脚本后创建的 config 文件夹中的 webpack.config.js 文件：

查看导出函数的返回值（这是主要配置）

找到最后添加的 style-loader 的位置，即 sass-loader

       {
          test: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: {
                getLocalIdent: getCSSModuleLocalIdent,
              },
            },
            'sass-loader'
          ),
        },

并在 sass-loader 下添加 less-loader，如下所示：

       {
          test: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: {
                getLocalIdent: getCSSModuleLocalIdent,
              },
            },
            'sass-loader'
          ),
        },
        {
          test: /\.less$/,
          use: getStyleLoaders(
            {
              modules: true,
              importLoaders: 3,
              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,
        },

less-loader 中的importLoaders选项应该是 3。

来自 getStyleLoaders + 我们的less-loader 的两个加载器。

importLoaders 选项允许您配置在将 css-loader 应用于 @imported 资源之前有多少个加载器。

为什么模块选项是true？

// index.less file

.header {
  background-color: skyblue;
}

如果你想使用这样的样式表文件：

import styles from './index.less';

<div className={styles.header}></div>

你应该设置模块：true

但如果你想像下面这样使用它：

import './index.less';

<div className="header"></div>

你应该设置模块： false

Answer 2

如果您使用 CRA，我建议您不要弹出。

首先安装less，less-watch-compiler然后concurrently：

npm install less less-watch-compiler concurrently --save-dev

然后在您的根目录中创建less-watcher.config.json并设置配置：

{
    "watchFolder": "src/",
    "outputFolder": "src/",
    "runOnce": false,
    "sourceMap": true,
    "enableJs": true
}

重命名App.css为App.less

将开始替换script为package.json以下内容：

"scripts": {
    "start": "concurrently --kill-others \"less-watch-compiler --config less-watcher.config.json\" \"react-scripts start\"",
    "build": "react-scripts build",
    ....
}

并运行应用程序。享受 ：）

Answer 3

将我的 React 升级到 v 18 后，您可以使用 React-app-rewired 库来完成此操作，而无需弹出整个 React 配置，它更干净。

安装react-app-rewired

npm i react-app-rewired

安装越来越少的loader

npm install less less-loader --save-dev

将 package.json 中的脚本更改为

 "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",

之后，您的主应用程序文件夹中需要一个名为 config-overrides.js 的文件来配置您的应用程序，您需要添加此配置

module.exports = function override(config, env) {
  config.module.rules[1].oneOf.splice(2, 0, {
    test: /\.less$/i,
    exclude: /\.module\.(less)$/,
    use: [
      { loader: "style-loader" },
      { loader: "css-loader" },
      {
        loader: "less-loader",
        options: {
          lessOptions: {
            javascriptEnabled: true,
          },
        },
      },
    ],
  })

  return config
}

就是这样。

Answer 4

CRA（Create React App）默认只支持SASS，CSS如果你想使用LESS你需要先做npm run eject然后修改webpack配置。

然而，有一种方法可以做到不弹出，但我不得不说我个人更喜欢弹出。您可以在这里找到说明