这两天有开始搞华为VOLTE第二版了,偷懒样式直接@import,这时发现第一版样式全服错乱,查看了下是在使用@import引入css的时候,css-loader对import的文件会当做外部资源来编译造成它变为全局样式
案例

<style scoped>
@import "./main.css";
.VoLTE{
  width: 100%;
  height: 500px;
  background: #434656;
  background-size: cover;
}
</style>

修改成

<style scoped src="./main.css"></style>

注意:如果想要额外增加样式需要单独写个style,如果在<style scoped src="../main.css"></style> 中增加样式将不生效所以最后改成下面效果,当然你也可以直接写到mian.css里面

<style scoped src="./main.css"></style>
<style scoped>
.VoLTE{
      width: 100%;
      height: 500px;
      background: #434656;
      background-size: cover;
    }
</style>

标签: vue, style scoped, @import

添加新评论