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