vue.config.js+element plus默认颜色修改
时间: 2023-08-10 08:41:05 浏览: 212
vue+element 主题背景颜色更换
要修改 Vue.js 中使用 Element Plus 组件库的默认颜色,需要在 `vue.config.js` 文件中进行配置。具体步骤如下:
1. 在 `vue.config.js` 文件中添加以下代码:
```javascript
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
'primary-color': '#1890ff', // 修改主题色
'link-color': '#1890ff', // 修改超链接颜色
'border-radius-base': '4px', // 修改组件圆角
},
javascriptEnabled: true,
},
},
},
};
```
2. 在 `modifyVars` 中修改需要的变量值,例如上述代码中将主题色修改为 `#1890ff`,超链接颜色也修改为 `#1890ff`,组件圆角修改为 `4px`。
3. 然后在组件中使用 Element Plus 的组件时,组件的颜色就会使用你在 `vue.config.js` 文件中配置的颜色。
注意:修改默认颜色可能会影响到全局组件的样式,因此需要谨慎修改。
阅读全文