vue-cli3 antd定制主题

这里可以参照官方文档

项目根目录下修改vue.config.js文件(需要安装less和less-loader,且安装版本不能太高,我最开始安装最新的版本,一直有各种报错,之后卸载了再安装低版本的就可以了)

// vue.config.js for [email protected]
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

未生效解决方法:

  注意样式必须加载 less 格式,一个常见的问题就是引入了多份样式,less 的样式被 css 的样式覆盖了。

  •   如果在使用 babel-plugin-import 的 style 配置来引入样式,需要将配置值从 'css' 改为 true , 这样会引入 less 文件。
  •   如果是通过  'ant-design-vue/dist/antd.css' 引入样式的,改为 'ant-design-vue/dist/antd.less' 。

这样子就可以了。

猜你喜欢

转载自blog.csdn.net/weixin_42217154/article/details/113858370
今日推荐