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

原文由 Joe P 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要在使用 create-react-app 创建 的 React 项目中使用 更少的文件，请执行以下步骤：

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

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

找到最后添加样式加载器的位置，即 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 资源之前有多少个加载器。

为什么模块选项是真的？

 // index.less file

.header {
  background-color: skyblue;
}

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

 import styles from './index.less';

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

你应该设置 modules: true

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

 import './index.less';

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

你应该设置 modules: false

原文由 armin yahya 发布，翻译遵循 CC BY-SA 4.0 许可协议