在 React 中使用 .less 文件

问题描述 投票：0回答：8

我正在尝试将 .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;
}

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
        }],
    }],
}
reactjs less
8个回答
17
投票

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

  1. npm run eject
  2. npm i less less-loader
  3. 打开位于弹出脚本后创建的 config 文件夹中的 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 资源之前有多少个加载器。

为什么模块选项为true？

// 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

12
投票

如果您使用 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

将 

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

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

并运行应用程序。享受吧:)

9
投票

将我的 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
}

就是这样。

5
投票

CRA（Create React App）默认只支持

SASS
和
CSS
，如果你想使用
LESS
，你需要先做
npm run eject
，然后修改
webpack
配置。

但是有一种方法可以做到不弹出，但我不得不说我个人更喜欢弹出。您可以在此处

找到说明
2
投票

用途：

npm i -D react-scripts-less

然后：

"scripts": {
    "start": "react-scripts-less start",
    "build": "react-scripts-less build",
    "test": "react-scripts-less test",
}
0
投票

尝试：

{test:/\.less$/, use:['style-loader','css-loader','less-loader']}
0
投票

弹出并配置

webpack.config.js
后，还需要在
less
中添加
react-app-env.d.ts
文件模块声明。

declare module "*.less" {
  const content: { [className: string]: string };
  export default content;
}

否则你会得到一些像这样的错误。

Cannot find module ‘xxx.less‘ or its corresponding type declarations. TS2307
-2
投票

在大型项目中使用此方法是否相关？

npm run eject
npm i less less-loader

打开位于弹出脚本后创建的配置文件夹中的

webpack.config.js
。查看导出函数的返回值（这是主要配置）。找到最后添加 
style-loader
的位置，即 
sass-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,
},
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.