scss中如何修改全局样式

Question

项目使用的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>

Answer 1

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

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

Answer 2

这类全局统一处理样式不建议在单组件里去写，一般是写公共scss文件，去处理这些问题；
deep是为了在加了scoped的组件里去修改比如第三方控件或者其他组件之类的样式

Answer 3

当style标签具有该scoped属性时，其CSS将仅应用于当前组件的元素
你可以在app.vue里写全局样式，修改的时候在app.vue的页面改就行了