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