vue怎么改掉全局css样式_怎么修改vue⾥⾯elememtUI的css
样式
需求改为红⾊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 的⽂件裡⾯就有提到。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。