antd自定义主题，报错：ValidationError: Invalid options object. Less Loader has been initialized usin...

最新推荐文章于 2024-08-24 15:32:14 发布

含蓄的坦克

最新推荐文章于 2024-08-24 15:32:14 发布

阅读量1.1k

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_44606225/article/details/107499892

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍如何在React项目中使用Ant Design组件库，实现组件的按需加载和自定义主题颜色。通过安装特定依赖，配置加载规则，以及调整less变量，可以有效优化项目构建速度和文件大小，同时保持界面风格的一致性和个性化。

摘要由CSDN通过智能技术生成

实现组件的按需打包

下载依赖模块

npm install react-app-rewired customize-cra babel-plugin-import --save-dev

定义加载配置的 js 模块: config-overrides.js

const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    })
);

修改配置: package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }

直接在应用中使用 antd 组件

自定义 antd 主题

下载工具包

npm install less less-loader

修改 config-overrides.js

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

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        // style: 'css',
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {
            '@primary-color': '#2daebf'
        }
    })
);

结果报错，报错内容如下：

通过查相关文档发现是less-loader更新后对于配置方式做了改变 https://www.npmjs.com/package/less-loader#lessoptions
修改如下：

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

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        // style: 'css',
        style: true
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#2daebf'
            }
        }
    })
);