本篇是vue-cli2定制主題，vue-cli3通過vue.config.js定制主題點(diǎn)擊此處
1.引入less和less-loader（如果報(bào)錯(cuò)，請將less-loader版本更改到5.0.0）

npm install less less-loader --save

2.在 vue cli 2 中定制主題，修改build/utils.js文件

less: generateLoaders("less", {modifyVars: {"primary-color": "#1DA57A", // 全局主色"link-color": "#f5222d", // 鏈接色"success-color": "#52c41a", // 成功色"warning-color": "#faad14", // 警告色"error-color": "#f5222d", // 錯(cuò)誤色"font-size-base": "14px", // 主字號"heading-color": "rgba(0, 0, 0, 0.85)", // 標(biāo)題色"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)" // 浮層陰影},javascriptEnabled: true}),

3.注意樣式必須加載 less 格式

• 如果你在使用 babel-plugin-import 的 style 配置來引入樣式，需要將配置值從 ‘css’ 改為 true，這樣會(huì)引入 less 文件。
• 如果你是通過 ‘a(chǎn)nt-design-vue/dist/antd.css’ 引入樣式的，改為 ant-design-vue/dist/antd.less。

4.重啟項(xiàng)目即可（每次設(shè)置主題色后需要重新才可以看到效果）

總結(jié)

以上是生活随笔為你收集整理的vue-cli2定制ant-design-vue主题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。