Vue使用@import 引入样式文件全局污染问题
使用@import引入样式文件:<style scoped lang="less">@import './style.less';</style>就算加scoped,其它没有引入的模块还是可以访问到你的样式,如果某个组件的类名一致,则就会被污染到,这样的引入方式就会造成全局污染,即使你写了scoped。因为:@import并不是直接将目标文件的代码引入到使用的文件中来,而是
·
使用@import引入样式文件:
<style scoped lang="less">
@import './style.less';
</style>
就算加scoped,其它没有引入的模块还是可以访问到你的样式,如果某个组件的类名一致,则就会被污染到,
这样的引入方式就会造成全局污染,即使你写了scoped。因为:
@import并不是直接将目标文件的代码引入到使用的文件中来,而是发起了一个新的请求,获得相应资源,这个时候并没有加私有限制scoped,因此这种方式引入的文件将作用于全局。
解决办法:
<style src="./style.less" scoped></style>
以style标签src引入,并添加scoped,这样就不会产生样式污染。
值得一提的是:
以@import引入的话,继续在下面写样式有效果,如sonList_take:
<style scoped>
@import '../../style.less'; // 记得后面还有分号噢
.sonList_take {
background: pink !important;
}
</style>
以src引入的话,在引入的style标签里写样式没有效果了,如sonList_take:
<style scoped src="../../assets/mechanismTask/index.css">
.sonList_take {
background: pink !important;
}
</style>
后面测试发现,使用@import引入对其它文件的样式并没有影响到,即在其它组件使用@Import的样式文件中的类名,并没有拿到样式的值,所以,待下次遇到或者其它问题再更新吧!
温馨提示:引入结尾处记得加分号哟
原创在这儿:https://blog.csdn.net/suheivy/article/details/110005564
更多推荐
已为社区贡献35条内容
所有评论(0)