Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
319 views
in Technique[技术] by (71.8m points)

scss中如何修改全局样式

项目使用的scss写css
因为业务问题,后台管理系统的首页需要修改layout的样式
问题是在scoped里修改layout的样式无效,试着修改body的样式也无效
如果不写scoped的话,无论改body还是layout样式都可以生效
使用过 /deep/ 以及 ::v-deep 都无效
贴代码

<style lang="scss" scoped>
.progress-list li >>> .el-col div {
  text-align: left !important;
}
::v-deep body {
  border: 1px solid red !important;
}
/deep/ body {
  padding: 0;
  border: 1px solid red !important;
}
<style>

只要带scoped怎么写都无效

然后不带scoped
就可以用

<style lang="scss">
 body {
   border: 1px solid blue;
 }
.el-col div {
  text-align: left !important;
}
</style>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

单文件中的scoped会给当前文件样式加上标识,这样就能起到不污染全局的一些样式,只在单个文件中生效,你的body在当前文件中并没有这样的标识所以不会生效。而在单文件style中,deep是针对修改其他组件或第三方组件的样式

这种建议提出统一的公共样式。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...