关于react.js:react中配置全局less变量

配置步骤：

• 引入 react-app-rewired 插件
  react-app-rewired 的作用就是在不 eject 的状况下, 笼罩 create-react-app 的配置
• 装置 customize-cra
  npm install react-app-rewired customize-cra --save-dev
• 批改 package.json 里的启动配置

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

• 在配置文件 config-overrides.js 中批改

const {
    override,
    addLessLoader, // less 配置函数
    fixBabelImports, // 按需加载配置函数
    addBabelPlugins, // babel 插件配置函数
    addWebpackAlias, // / 门路别名
} = require('customize-cra');
const path = require("path");
module.exports = override(
    ...addBabelPlugins( // 反对装璜器
        [
            '@babel/plugin-proposal-decorators',
            {legacy: true}
        ]
    ),
    fixBabelImports('import', { // antd 按需加载
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true  // 主动打包相干的款式 默认为 style:'css', 这里须要改为 true
    }),
    addLessLoader(
        {
            javascriptEnabled: true,
            modifyVars: {'@primary-color': '#004080'}  // 这里也能够配置全局的款式变量, 不倡议在配置文件中增加, 这个批改 @primary-color 次要是为了批改 antd 的主题色
        }
    ),
    addWebpackAlias({ // 门路别名
        '@': path.resolve(__dirname, 'src'),
    }),
    (config) => {
        // 批改、增加 loader 配置 :
        // 所有的 loaders 规定是在 config.module.rules(数组) 的第二项
        // 即：config.module.rules[2].oneof  (如果不是，具体能够打印 一下是第几我的项目)
        // 批改 less 配置，规定 loader 在第 7 项 (具体能够打印配置)
        const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
        console.log(loaders)
        loaders[7].use.push({
            loader: 'style-resources-loader',
            options: {patterns: path.resolve(__dirname, 'src/style/common.less')// 全局引入公共的 scss 文件
            }
        })
        return config
    }
)

• common.less

@import 'reset.less';
@import 'variable.less';
.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

• variable.less, 须要增加全局款式变量，间接在这个文件增加

@primary-color: #004080;
@bg-gray-color: #F4F4F4;