使用@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

Logo

前往低代码交流专区

更多推荐