Vue style scoped 使用@import引入css, 作用域是全局的解决方案
Vue style scoped 使用@import引入css, 作用域是全局的解决方案
李维亮
发布于 2021-10-15 15:09:38
发布于 2021-10-15 15:09:38
这两天有开始搞华为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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-10-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读