Vue style里面使用scoped属性并@import引入外部css, 作用域是全局的解决方案

@import语法有两种：

@import "style.css";
@import url("style.css");

这两种语法没有什么差别。

外部引用CSS中 link与@import的区别

1.从属关系区别

link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。@import是 CSS 提供的语法规则，只有导入样式表的作用。

2.加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别

link支持使用js控制DOM去改变样式；@import不支持。

下面再说说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文件中的样式只能在本组件中使用，而不会影响其他组件*/