reactjs - 在 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

使用 更少的文件 在使用 创建的 react 项目中创建 react 应用程序跟着这些步骤:

npm run eject

npm i less less-loader

打开位于弹出脚本后创建的配置文件夹中的 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 中的选项应该是 3。
两台装载机 来自 getStyleLoaders + 我们的 少加载器 .

The option importLoaders allows you to configure how many loaders before css-loader should be applied to @imported resources.

为什么模块选项是真的？

// index.less file

.header {
  background-color: skyblue;
}

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

import styles from './index.less';

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

你应该设置 模块:真
但如果你想像下面这样使用它:

import './index.less';

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

你应该设置 模块:假