(精华2020年5月31日更新) react实战篇 react配置详解

以往的方式都是暴露配置文件来配置less，下面推荐一个craco，可以不需要暴露配置，进行配置。
首先安装craco

yarn add @craco/craco

在根目录下添加
craco.config.js文件

const CracoLessPlugin = require('craco-less');//配置less

module.exports = {
    plugins: [{
        plugin: CracoLessPlugin,
        options: {
            lessLoaderOptions: {
                modifyVars: {
                    '@primary-color': '#1DA57A'
                },
                // @primary-color: #1890ff; // 全局主色
                // @link-color: #1890ff; // 链接色
                // @success-color: #52c41a; // 成功色
                // @warning-color: #faad14; // 警告色
                // @error-color: #f5222d; // 错误色
                // @font-size-base: 14px; // 主字号
                // @heading-color: rgba(0, 0, 0, 0.85); // 标题色
                // @text-color: rgba(0, 0, 0, 0.65); // 主文本色
                // @text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
                // @disabled-color: rgba(0, 0, 0, 0.25); // 失效色
                // @border-radius-base: 4px; // 组件/浮层圆角
                // @border-color-base: #d9d9d9; // 边框色
                // @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
                javascriptEnabled: true,
            },
        },
    }, ],
};

启动修改

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