vue 引用网络css_vue 中css文件引入问题

css外部文件引入:

全局引用

在main.js文件中

import './style/reset.css'

@import '../../xxx.css'; //要写分号否则会报错

//写scoped表示只在当前局部有效

body{

width:1000px; //这样写才是局部有效的，如果是引入的css文件就还是全局有效

}

首先是有关@import的问题，一般的文件中，我们知道引用外部css，有两种方式：

1. HTML中使用link标签

2.CSS中@import

@import "style.css";

import语法有两种：

@import "style.css";

@import url("style.css");

两种写法效果一样

注意到加粗的部分么——import规则一定要先于除了@charset的其他任何CSS规则，这句话是什么意思呢，我们看个例子：

index.html

.hd{

color: orange;

}

@import "import.css"; //此引入写在之后，则不会加载，也就不会覆盖上面的样式

我是什么颜色

import.css

.hd{

color: blue;

}

测试发现，p的颜色并不是import.css里所定义的蓝色，而是之前定义的橘黄色。打开网络请求会发现没有请求import.css文件，这正是因为，再次强调一遍，import规则一定要先于除了@charset的其他任何CSS规则，所以需要将index.html改成酱紫：

@import "import.css";

.hd{

color: orange;

}

...

我是什么颜色

这时候能看到import.css网络请求，p的颜色为橘黄色，覆盖了import.css里定义的蓝色。

以上部分转载自点击打开链接

当然使用链接link和导入import的好处就是易于维护，但当网速比较慢的时候，会出现加载中断的情况，导致页面排版错误

外部引用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不支持。

另外：

js中也可以引入相应的css样式 然后用js动态控制css类名的添加与删除