关于vue项目样式优先级问题

Question

问题遇到的现象和发生背景

关于vue项目是要element 使用message需要修改一些样式,在scss 的loader里写怎么尝试都不会生效 写在下面style就可以,有没有懂问题出在哪里

用代码块功能插入代码，请勿粘贴截图

<style lang="scss" scoped>
.MinWIDTH99 .el-message__content {
  display: inline-block !important;
  max-width: 310px !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
}
</style>
<style>
.MinWIDTH99 .el-message__content {
  display: inline-block !important;
  max-width: 310px !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
}

我的解答思路和尝试过的方法

写在第一个scss里样式不会生效,但是下面style正常 是因为引入顺序问题吗?

Answer 1

style 不加 scoped 是全局的
加上 scoped 就只在当前组件生效

在全局生效是因为你那个弹窗在当前组件之外 。f12看看就知道了