vue 怎么改掉全局css 样式_怎么修改vue里面elememtUI的css样式

需求改为红色

background-color: red;

}

1. 第一种

把上面的scoped去掉

优点: 修改简便

缺点: 把scoped去掉了，就变成全局css了，可能会影响其他组件

2. 第二种

就是去 node_modules裡面把 element-ui 整包 CSS 给抓出来，然后放到自己指定的路径！

这是 element-ui 的 CSS 在node_modules裡面的位置

// 原本的路径 (就不要用 node_modules 这包)

import ‘element-ui/lib/theme-chalk/index.css’;

// 自己抓下来后指定的路径 (改成自己抓下来这包)

import ‘./scss/theme-chalk/index.css’;

然后这样就可以去修改自己抓下来这包，就可以改 element-ui 的 CSS 了。

优点：可以不会去跟其他 class 互相影响到，还有不是透过覆盖，是透过直接修改，这样整包的主导权就会在自己手上！

缺点：要花点时间去看完整包CSS架构，还有就是说如果 element-ui 有升级的话，对于自己抓下来修改CSS的部分可能会有问题，所以这方面可能要评估一下。

3. 第三种

我个人觉得比较好得做法，不用把整个CSS包抓出改，也可以使用scoped的方式来写CSS，其实可以使用 深度作用选择器 来实作。

如果希望 scoped 样式中的一个选择器能够更深入权重，例如影响子组件，你可以使用 >>>加深操作权重。

这个代码会编译成

.a[data-v-f3f3eg9] .b { /* ... */ }

像 Sass 无法正确解析 >>>。这种情况下你可以使用 /deep/符号取代，这是>>>的别名，同样可以正常编译。

我们回来看看我完成修改的画面！

我的阶层是 .el-main > .el-input > .el-input__inner，所以我这样写

.el-input__inner 就是我最后要修改的 input，所以我最后使用了 /deep/去修改他的CSS样式，是不是很简单。

优点：可以不用一定要element-ui整包CSS抓出来放到自己的专案资料夹裡面去修改，还可以在vue的组件裡面使用scoped让你的CSS可以组件化，不要去改到原本element-ui的程式码，我个人比较喜欢这样的做法。

缺点： 这样就是透过覆盖的方式来去覆写 element-ui 的 CSS，效能的部分有待验证，不过比起把整包 CSS 抓出来修改还要去担心会不会因为升级或是改坏那包CSS的风险跟时间成本比起来，我觉得还好啦！

关于深度作用选择器的相关内容可以参考 vue-loader 的文件裡面就有提到。