@import
说明
- 用于从其他样式表导入样式规则。可以是绝对或相对路径,也可以是一个在线的url地址。
- @import 规则必须在 CSS 文档的头部,但可以在 @charset 规则后面。
- @import 规则不是一个嵌套语句,@import不能在条件组的规则中使用。
- @import 规则还支持媒体查询,因此可以根据不同屏幕尺寸导入不同的样式文件。
参数
url:他有两种表现形式。
- 可以是一个字符串指定的文件路径,也可以是一个在线的url地址。
@import "../../assets/css/iconfont.css";
- 2.可以使用url()方法引入
@import url("../../assets/css/iconfont.css");
list-of-media-queries:是一个逗号分隔的 媒体查询 条件列表,决定通过 URL 引入的 CSS 规则 在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件,就不会引入 URL 指明的 CSS 文件。
扩展
需要注意的是@import
其实是全局引入的,即使你放在scoped
属性包含的style标签里面,他依旧会被注册为全局样式。如果你真的想要引入一个css文件并只将其作为局部样式使用,可以添加一个style
标签使用其src
属性
<style src="../../assets/css/iconfont.css" scoped></style>