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

大家好 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
    })
  )