react antd报错options has an unknown property modifyVars

最新推荐文章于 2024-09-02 20:04:09 发布

前端小Q

最新推荐文章于 2024-09-02 20:04:09 发布

阅读量3.4k

点赞数 7

分类专栏： React

本文链接：https://blog.csdn.net/weixin_44927460/article/details/106622263

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用React-App-Rewired和customize-cra插件来配置Ant Design主题，包括安装必要依赖、修改配置文件以实现主题颜色定制，以及解决在新版本中遇到的LessLoader配置问题。

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

安装依赖

yarn add antd
yarn add react-app-rewired customize-cra babel-plugin-import
yarn add less less-loader

在根目录下配置config-overrides.js

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

module.exports = override(
    // 按需打包
    fixBabelImports('import',{
        libraryName:'antd',
        libraryDirectory:'es',
        style:true,//自动打包相关的样式 默认为 style:'css'
    }),
    // 设置antd自定义主题
    addLessLoader({
        javascriptEnabled: true,
        modifyVars:{'@primary-color':'#1DA57A'},
    })
);

修改packge.json 的配置文件

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

然后就报错
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

options has an unknown property ‘modifyVars’. These properties are valid:
object { lessOptions?, prependData?, appendData?, sourceMap?, implementation?

查找了相关文档发现，新版本写法已经发生改变，下面翻译过来就是css-loader配置格式（从布尔值转换为的选项lessOptions）已在custom-cra的运行和构建过程中引起错误，
原来addLessLoader的配置选项现在将嵌套在一个lessOptions对象中
在这里插入图片描述

解决方式

将addLessLoader的配置选项现在将嵌套在一个lessOptions对象中

const {override,fixBabelImports,addLessLoader} =require('customize-cra');
module.exports = override(
    fixBabelImports('import',{
        libraryName:'antd',
        libraryDirectory:'es',
        style:true,
    }),
    addLessLoader({
        lessOptions:{
            javascriptEnabled:true ,
            ModifyVars:{  '@primary-color':'#eee'  } 
        }
    })
);