vue中css文件引入：src VS @import

在vue文件中，引入css文件常用的两种方式：

1.使用src

因为没有加 scoped ，以上两种方式没有什么区别，作用域都是全局

如果加上scoped呢？是否作用域都变成局部了？

no，只有一个写法作用域在局部，即src写法

为什么呢？

我们来看一下使用以上两种方式引入在编译后，代码的区别
@import引入编译后代码如下：

src方式引入编译后代码如下：

明显看出，src方式引入，每个css样式都自动添加一个唯一的属性(例如：data-v-469af010)，此数属性为组件内 CSS 指定作用域，和写在中写样式是一样效果的，而@import的引入方式没有此属性，作用域为全局

总结：

1.vue中，css指定作用域有两种方式，①.传统写在带有scoped属性的标签中；②.使用src引入css文件

2.css文件引入方式：@import方式引入css文件作用域是全局，src引入css文件作用域是制定作用域