关于 react项目引入 less不起作用的问题解决

最新推荐文章于 2025-05-08 19:52:24 发布

溱潼丶

最新推荐文章于 2025-05-08 19:52:24 发布

阅读量3.8k

点赞数 7

CC 4.0 BY-SA版权

文章标签： js react less

本文链接：https://blog.csdn.net/qww12388/article/details/122446383

本文介绍三种在React项目中集成LESS的方法：导出并修改webpack配置、使用craco进行配置及使用react-app-rewired进行定制配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好 2022年第一篇文章

本次探究的话题是 react如何使用less

众所周知 react 引入sass scss 但是没有less 我们要用less怎么办废话短说看操作

方案一导出webpack (不推荐)不可逆

使用命令导出webpack

cnpm run eject

引入 less 和 less-loader (有的话就不用了)

npm install less-loader less --save

找到 webpack.config.js文件

找到下面这一行

新增红框里面的代码

再在sass后面配置less 改成less就行

方案二使用 craco (推荐)

命令引入 craco 和craco-less

npm i craco
npm i craco-less

在文件package.json文件 srcipts 改为下面的代码


  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

然后在文件夹根路径新增 craco.config.js 文件

增加下面代码

const CracoLessPlugin = require("craco-less");
const { loaderByName } = require("@craco/craco");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        modifyLessRule(lessRule, context) {
          // You have to exclude these file suffixes first,
          // if you want to modify the less module's suffix
          lessRule.exclude = /\.m\.less$/;
          return lessRule;
        },
        modifyLessModuleRule(lessModuleRule, context) {
          // Configure the file suffix
          lessModuleRule.test = /\.m\.less$/;

          // Configure the generated local ident name.
          const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
          cssLoader.options.modules = {
            localIdentName: "[local]_[hash:base64:5]",
          };

          return lessModuleRule;
        },
      },
    },
  ],
};

然后修改 react-app-env.d.ts 文件，添加一下内容，解决找不到模块的问题

declare module '*.module.less' {
  const classes: {
    readonly [key: string]: string
  }
  export default classes
  declare module '*.less'
}

更多请参考 craco-less 文档： https://www.npmjs.com/package/craco-less

方案三使用 react-app-rewired 对 webpack 进行自定义配置(覆盖或添加)

3.1 react-app-rewired 老版本配置方法

安装 react-app-rewired 插件

npm install react-app-rewired --save-dev
 
修改 package.json 中的脚本命令：修改如下
  "scripts": {
   "start": "react-app-rewired start",
  "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom",
   "eject": "react-app-rewired eject"
  }

在项目根目录下(和 package.json 同级)新建配置文件 config-overrides.js ，并添加如下内容

module.exports = function override(config, env) {  // 在这里添加配置  return config;}

修改配置文件 config-overrides.js 使得项目能够支持 less

安装依赖包 react-app-rewire-less，通过该依赖包来实现对 less 的支持：

# 说明: 这里不再需要额外单独安装依赖包：less-loader  lessnpm install react-app-rewire-less --save复制代码

修改 config-overrides.js 配置文件

const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
  // 只需要一条配置信息即可实现对less的支持
 config = rewireLess(config, env);
   return config;
}

3.2 react-app-rewired 新版本配置方法( >=2.1.0 )

react-app-rewired 的使用：使用上和旧版本基本一样只是在配置上需要额外通过 customize-cra 插件来实现
安装 react-app-rewired customize-cra 插件

npm install react-app-rewired customize-cra --save-dev

修改 package.json 中的脚本命令：修改如下


"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",
   "eject": "react-app-rewired eject"
  }

在项目根目录下(和 package.json 同级)新建配置文件 config-overrides.js ，并添加如下内容

const { override } = require('customize-cra');module.exports = override();复制代码

修改配置文件 config-overrides.js 使得项目能够支持 less

安装依赖： less less-loader

npm install less less-loader --save-dev


 const { override, addLessLoader } = require('customize-cra');
module.exports = override(
  addLessLoader({
    strictMath: true,
    noIeCompat: true
  })
)