vue中引入elementUI,关于修改默认样式的几点总结

ElementUI的默认主题色是鲜艳、友好的蓝色，但是往往不能满足定制化的需求，我们在项目中，可能需要修改组件库默认的颜色，那么，该怎么操作呢？

首先，确定你的vue项目中有没有安装scss

image

项目中引入了scss时：

ElementUI的样式是使用scss编写的，所以主题色其实就是scss的一个变量，那么在你引入ElementUI样式之前，重新定义这个主题色变量就OK了

新建一个样式文件，例如 element-variables.scss，写入以下内容：

/* 改变主题色变量 */

之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：

import Vue from 'vue'

注意点：

1）要在引入elementUI默认样式之前定义你的主题色

2）在.scss文件中引入elementUI样式文件，如果是相对路径，前面要加‘~’

项目中没有引入scss

项目中如果没有使用scss，那么新建.scss文件就会报错，这种情况想改变主题色，可以使用官方的在线主题生成工具，或者官方推荐的命令行工具。

工具会生成一个css的样式文件压缩包，将这个样式文件解压到一个叫做‘my-theme’的文件夹下，在main.js中引入这个样式文件中的index.css

image

修改某一个组件的样式

主题色修改了，但是对于某些页面的某些组件，我们不想使用主题颜色，该怎么操作呢？

我们可以建立一个文件夹，里面专门用来放覆盖原有样式的scss文件或者css文件。

如果使用scss，可以引入到element-variables.scss文件中覆盖。比如：建立这样一个文件夹，tree.scss文件中专门用来覆盖elementUI中树的样式

image

在element-variables.scss文件中引入，一定要放在elementUI默认样式引入之后

@import "~element-ui/packages/theme-chalk/src/index";

如果不想将样式用到所有的“树”，记着这你的覆盖样式之前加上class名的限定。

tree-container {

这样，只有在外层class为“.tree-container”下的树才会被改变默认样式。

如果使用css，要单独引入到main.js文件中,elementUI样式之后。

@import "element-ui/packages/theme-chalk/src/index";

一定要注意：不要在加入“scope”标签的里写覆盖文件。