在react配置使用less的完美方案
作者：佛系努力中……
在react配置使用less的最优解
react默认支持用scss，不支持less，直接使用less时会报错，因此当使用less的时候需要进行额外配置。至于技术选型选择less或scss完全取决于你的个人偏好。你当然可以采取别的方式去实现对less的配置。但是我这里只提供了一种方式用于解决问题，主要是为了记录，便于自己日后查看。
安装
npm install less less-loader --save-dev // yarn add less less-loader --dev
配置 webpack
由于 create-react-app 使用 webpack 作为其模块打包器，你需要修改 webpack 的配置来支持 .less 文件。为此，你可以使用 react-app-rewired 和 customize-cra。
首先，安装这三个依赖：
npm install npm install react-app-rewired customize-cra babel-plugin-import --save-dev // yarn add npm install react-app-rewired customize-cra babel-plugin-import
修改你的项目中的 package.json 文件，将 scripts 中的 start 和 build 命令替换为使用 react-app-rewired 的命令。例如：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}-在根目录下创建一个新的配置文件 config-overrides.js 在项目根目录下，并添加以下内容来覆盖默认的 webpack 配置以支持 Less：
config-overrides.js是一个用于覆盖create-react-app默认配置的文件。它允许开发人员在不强制eject的情况下修改webpack配置。通过使用config-overrides.js，开发人员可以添加自定义webpack配置，例如添加新的loader或plugin。
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd', // 如果你的项目中使用了 antd 或其他库需要按需加载样式，请相应地修改这里。
libraryDirectory: 'es', // 默认值是 'lib'，如果你使用的是 antd 的 es 模块版本，请修改这里。
}),
addLessLoader({ lessOptions: { javascriptEnabled: true } }) // 启用 JavaScript 在 Less 中的支持（如果需要的话）。
);在组件中使用 Less:
现在你可以在组件中使用 .less 文件了。例如，你可以创建一个名为 MyComponent.less 的文件，并在你的 React 组件中这样导入它：
import './MyComponent.less'; // 使用相对路径导入你的 .less 文件。
报错
在配置过程中可能会出现以下报错信息
Syntax Error: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
options has an unknown property ‘plugins’. These properties are valid:
object { postcssOptions?, execute?, sourceMap?, implementation? }
别问，问就是我也不知道到为啥，尝试以下方式解决
降低less-loader版本至5.0.0
yarn remove less-loader yarn add less-loader@5.0.0
2.修改config-overrides.js配置（我是这么解决的）
customize-cra-less-loader
const { override } = require("customize-cra");
const addLessLoader = require("customize-cra-less-loader");
module.exports = override(
addLessLoader({
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
modifyVars: {
'@primary-color': '#038fde',
}
}
}
})
);到此这篇关于在react配置使用less的最优解的文章就介绍到这了,更多相关react配置使用less内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！