vue 中 scoped的用法 以及css文件引入问题的补充

自：https://blog.csdn.net/weixin_39941429/article/details/80254724

下面再说说VUE中scoped的编译原理吧。具体可以参考vue-loader

所谓的局部css，就是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag，同时将template内的所有html都打上一个相同的tag，最后通过css的属性选择器定位，造就了所谓的局部css。参考scoped内复写组件样式

css-loader对import的文件会当做外部资源，那么我能理解为它是把import的css文件单独提取出来，并没有把其中的样式放在<style scoped>中解析，而是最后把<style>中计算结果和import的css文件混合后，交由style-loader最后解析为style标签加载在页面里。解决办法如下：

1、

<style scoped>
    @import '../../assets/css/home.css';  
</style>
/*这样写的话import的css文件会被编译为全局样式，但是引入less等预编译文件，就>会局部生效*/

2、

<style src="../../assets/css/home.css" scoped>
</style>
/*这样写的css文件中的样式只能在本组件中使用，而不会影响其他组件*/