ante-design定制主题_注意样式必须加载 less 格式,一个常见的问题就是引入了多份样式,less 的样式被 cs-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44996782/article/details/102582453

本文介绍了如何在Vue项目中定制Ant Design的主题颜色，通过安装必要的依赖和配置vue.config.js以及babel.config.js文件来实现。同时，解决在引入Ant Design样式时，由于CSS覆盖Less样式导致自定义主题不生效的问题，强调需确保引入的是Ant Design的Less文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：在项目中引入ante-design按钮，但是要修改颜色，一个一个组件修改太麻烦了
解决方法：
1.npm命令如下
添加链接描述npm install less less-loader --save-dev
npm i babel-plugin-component -D
npm install babel-plugin-import --save-dev

2.在 vue cli 3 中定制主题 #
项目根目录下新建文件vue.config.js

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1DA57A',
          'link-color': '#1DA57A',
          'border-radius-base': '2px',
        },
        javascriptEnabled: true
      }
    }
  }
}

3.没有生效？
注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。

如果你在使用 babel-plugin-import 的 style 配置来引入样式，需要将配置值从 ‘css’ 改为 true，这样会引入 less 文件。
//babel.config.js

module.exports = {
    presets: [
        [
            '@vue/app',
            {
                polyfills: [
                    'es6.promise',
                    'es6.symbol',
                    'es6.array.iterator',
                    'es6.object.assign',
                    'es7.promise.finally',
                    'es7.array.includes'
                ]
            }
        ]
    ],
    plugins: [
        [
            'import',
            {
                libraryName: 'ant-design-vue',
                libraryDirectory: 'es',
                style: true
            }
        ],
        [
            'component',
            {
                libraryName: 'element-ui',
                styleLibraryName: 'theme-chalk'
            }
        ]
    ]
}