vue中style scoped的意义以及修改外来组件的样式

在这里插入图片描述
这就导致我们想更改一些引用的组件的css的时候,无法成功。
比如说我用了element的一个折叠组件,想改变他的颜色。
调试的时候我能在这里改变这些属性,但是如果在vue的style中的修改确是无效的。
在这里插入图片描述
在这里插入图片描述
解决办法:

引入scss可以嵌套父和子的作用域

npm install css-loader style-loader --save-dev
npm install node-sass sass-loader --save-dev

然后使用深度选择器,既不破坏别的组件的css,也能覆盖当前组件。

    .el-collapse-item >>> .el-collapse-item__header{
        background-color: rgb(217, 237, 247);
    }

参考链接:

https://segmentfault.com/a/1190000009802725
https://juejin.im/post/5cf488ea518825378867758f#heading-1
https://www.cnblogs.com/CyLee/p/10006065.html】

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章