vue-cli2定制ant-design-vue主题

约定不等于承诺〃 2021-09-02 07:50 558阅读 0赞

本篇是vue-cli2定制主题，[vue-cli3通过vue.config.js定制主题点击此处][vue-cli3_vue.config.js]  
1.引入less和less-loader（如果报错，请将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", // 错误色
            "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)" // 浮层阴影
          },
          javascriptEnabled: true
        }),

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]

3.注意样式必须加载 less 格式

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

4.重启项目即可（每次设置主题色后需要重新才可以看到效果）

[vue-cli3_vue.config.js]: https://blog.csdn.net/i_am_a_div/article/details/108242402
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/1e91dd4b9f9f4dd5a11921d52637486d.png