当我在vue项目中使用element-ui时,想要修改element的组件的默认样式,但是我vue文件内已经写了
<style lang="scss" scoped>
加了sass预处理和scoped。这样我们就需要想办法摆脱scoped的束缚,穿透它。我记得可以用vue-loader的>>> 和 deep,用了之后发现前者没有效果,后者报错
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected selector.
╷
236 │ /deep/ .el-input__inner{
顿时迷茫了,这出了什么问题?
开始google
有说vue-loader的版本问题,要升级到12.0.0以上,我一看我15.0.0明显不需要升级。
有说要把scoped去掉的,我看到这个内心炸裂
无可奈何,只能发动自己的人力资源了
一支穿云箭,千军万马来相见
终于,找到了解决方案, 用::v-deep就可以了。
::v-deep .el-input__inner {
color: #333941;
}