使用带有React的.less文件

Question

我试图用一个极简反应应用程序(用create-react-app).创建)使用.less文件。我已经将less和less-loader添加到less-loader和package.json中，并在webpack.config.js文件中添加了模块规则。但是，没有将类引用添加到HTML元素(应该有class="customColor"). )。

<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.less

@custom-color: red;

.customColor {
  color: @custom-color;
}

package.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项目中使用少文件，请执行以下步骤：

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

查看导出函数的返回值(这是主配置)

查找上一次样式加载器添加的位置，它是sass-加载程序。

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

在sass-加载程序下面添加更少的加载程序如下：

       {
          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,
        },

importLoaders选项在较少的加载程序中应该是3。

来自less-loader. +的二装载机

importLoaders选项允许您在css-加载程序之前配置对@导入资源应用多少加载器。

为什么模块选项是真的？

// index.less file

.header {
  background-color: skyblue;
}

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

import styles from './index.less';

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

您应该设置模块:真正的

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

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,
    "enableJs": true
}

将App.css重命名为App.less

将package.json中的start 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到v18之后，您可以使用react app重新连线库来完成它，而不需要弹出react的整个配置，它会更干净。

安装react app-重新连线

npm i react-app-rewired

安装越来越少的装载机

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
}

仅此而已。