vue使用@import引入样式文件全局污染,使用scoped失效的问题

scoped

在组件中style使用@import方式引入外部css,会发现引入的外部css会污染到其他地方,即所谓的样式全局污染.不管加不加上scoped都一样,

<style scoped>
    @import url('/style/index.css')
</style>

上面这种情况下即时加上了scoped也无效,样式也是一样的会被全局污染,

另一种引入css样式方式

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

直接使用style标签中src引入就可以使用scoped,这样就不会造成样式污染的问题

scoped的作用:将当前页面的css样式渲染在当前页面上,不会和其他页面的css冲突,即时在不同页面下,样式属性名一样也没关系,每个页面都写上scoped该值,样式只会渲染在当前页面上,不会污染和冲突

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容