React项目中使用less（2）

之前有写过yarn eject打开config文件安装使用less，React项目中使用less，今天不使用eject，直接安装使用less。

一、

安装less、less-loader插件：

yarn add less less-loader -D

二、

方法1、
安装react-app-rewired、react-app-rewire-less、babel-plugin-import、customize-cra插件：

yarn add react-app-rewired -D
yarn add react-app-rewire-less -D
yarn add babel-plugin-import -D
yarn add customize-cra -D

修改package.json文件中scripts设置，改react-scripts为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
文件中添加以下代码：

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {}
        }
    })
);

方法2、
安装 craco 、craco-less，并修改 package.json 里的 scripts 属性。

yarn add @craco/craco
yarn add craco-less

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

项目根目录新建 craco.config.js文件：

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

（二中方法1、2任选其一）
参考文章：

AntD 在 create-react-app 中使用
yarn和npm的区别、–save和–save-dev的区别
React项目中使用less总结