我正在尝试将 .less 文件与极简主义 React 应用程序一起使用（使用创建反应应用程序）。我已经添加less and less-loader to my 包.json以及我的模块规则webpack.config.js文件。然而，类引用并未添加到 HTML 元素中（应该有类=“自定义颜色”).

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

我想知道我做错了什么。

App.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
        }],
    }],
}

to use 更少的文件在使用创建的反应项目中创建反应应用程序按着这些次序：

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 中的选项应该是 3。

两个装载机来自 getStyleLoaders + 我们的少加载器.

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

为什么模块选项是true？

// index.less file

.header {
  background-color: skyblue;
}

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

import styles from './index.less';

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

你应该设置模块：真

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

import './index.less';

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

你应该设置模块：假