nuxt配置ant-design-vue主题颜色

nuxt内部集成自带ant-design-vue,但是没有解释如何配置主题颜色,根据官方网站配置下来,可能存在一些问题,简单记录一下

当前写作时文档只适用于nuxt版本^2.15.7

安装 less less-loader

npm install less@3.13.1 less-loader@7.3.0 -D
// or
yarn add less@3.13.1 less-loader@7.3.0 -D

注意,必须安装这个版本的,less3.13.1是less3版本的最后一个版本,7.3.0是less-loader7版本的最后一个版本

如果你不带版本好,编译100%会报错!!!版本差异有问题

修改nuxt配置文件 nuxt.config.js

css: ['ant-design-vue/dist/antd.css'],

改为

css: [
    // '@/assets/css/app.css'
    {
      src: 'ant-design-vue/dist/antd.less',
      lang: 'less'
    }
 ],
build: {
    loaders: {
      less: {
        lessOptions: {
          strictMath: false,
          javascriptEnabled: true,
          modifyVars: {
            'primary-color': '#E2B801', // 全局主色
            'link-color': '#E2B801', // 链接色
            'success-color': '#52c41a', // 成功色
            'warning-color': '#faad14', // 警告色
            'error-color': '#f5222d', // 错误色
            'font-size-base': '14px', // 主字号
            'heading-color': 'rgba(0, 0, 0, 0.85)', // 标题色
            'text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
            'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色
            'disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色
            'border-radius-base': '4px', // 组件/浮层圆角
            'border-color-base': '#d9d9d9', // 边框色
            'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)' // 浮层阴影
          }
        }
      }
    }
}
  • 1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,有些不正确的地方,仅供参考。
  • 2.本站中会转载我认为有用的博客文章,添加一些外链网站地址,但这些博客文章、论坛和网站上的内容和我没有关系,不代表我的意见,请网友自己多注意辨别。
  • 3.本站中转载文章会写明来源(点击下方链接按钮即可),感谢原作者的辛苦写作,如果有异议,及时联系我处理,谢谢!
  • 4.欢迎指出有问题的地方,我会尽快修正,谢谢!

系统由 Nginx + Next.js + React + Node + TailWindCss 驱动

沪ICP备20021316号