在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? }

别问，问就是我也不知道到为啥，尝试以下方式解决

1. 降低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',
        }
      }
    }
  })
);