antd自定义主题 craco-less安装失败问题

antd默认的按钮颜色是蓝色,现在想要改变它的主题为绿色
在这里插入图片描述
在初始化craco-less的时候出错,然后尝试了降低craco的版本以及安装指定craco-less指定版本都没有解决,后来仔细看错误提示找到了一个 解决办法(/(ㄒoㄒ)/~~所以还是需要仔细看提示,也许解决办法就在提示里面)
在这里插入图片描述
解决办法,执行npm i -S craco-less --force就可以正常安装成功了

npm i -S craco-less --force

craco.config.js

//配置具体的修改规则
const CracoLessPlugin = require('craco-less');
module.exports = {
    plugins: [
        {
          plugin: CracoLessPlugin,
          options: {
            lessLoaderOptions: {
              lessOptions: {
                modifyVars: { '@primary-color': '#1DA57A' },
                javascriptEnabled: true,
              },
            },
          },
        },
      ],
    babel: {//支持装饰器
        plugins: [
            [
                "import",
                {
                    "libraryName": "antd",
                    "libraryDirectory": "es",
                    "style":true
                    // "style": 'css' //设置为true即是less 这里用的是css
                }
            ]
        ]
    },
};

package.json

{
  "name": "react_staging",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.3",
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "antd": "^4.18.2",
    "axios": "^0.24.0",
    "babel-plugin-import": "^1.13.3",
    "craco-less": "^2.0.0",
    "nanoid": "^3.1.30",
    "prop-types": "^15.7.2",
    "pubsub-js": "^1.9.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Ant Design提供了一个可扩展的主题定制解决方案,使您可以通过更改变量的值来自定义Ant Design的主题。以下是如何自定义Ant Design主题的步骤: 1. 首先,您需要在项目中安装 `less-loader` 和 `less` 两个依赖: ``` npm install less-loader less --save-dev ``` 2. 在src目录下创建一个名为 `theme.less` 的文件,并在其中添加您希望更改的变量。例如,您可以更改主色调为蓝色: ``` @primary-color: #1890ff; ``` 3. 在 `webpack.config.js` 中添加以下代码来配置 `less-loader` : ``` // webpack.config.js module.exports = { // ... module: { rules: [ // ... { test: /\.less$/, use: [ { loader: 'less-loader', options: { lessOptions: { modifyVars: { 'primary-color': '#1890ff', }, javascriptEnabled: true, }, }, }, ], }, ], }, }; ``` 这里使用 `modifyVars` 来覆盖 `theme.less` 中的变量。 4. 导入您需要的Ant Design组件,并将其包装在 `<ConfigProvider>` 组件中。添加 `theme` 属性,并将其设置为您的 `theme.less` 文件的相对路径: ``` import { ConfigProvider, Button } from 'antd'; import './theme.less'; const App = () => ( <ConfigProvider theme="./theme.less"> <Button type="primary">Custom Theme</Button> </ConfigProvider> ); ``` 在这里,我们将 `theme` 属性设置为 `./theme.less` ,这是 `theme.less` 文件的相对路径。 现在,您的Ant Design主题已成功自定义!您可以根据需要更改 `theme.less` 文件中的变量来更改主题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值