CSS @import
@import用于从其他样式表导入样式规则@import必须在CSS文档的头部，但可以在@charset规则后面@import不是一个嵌套语句，不能在条件组的规则中使用@import支持媒介查询
link和@import的区别
- 差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
- 差别2：加载顺序的差别。
当在外联css文件A中使用@import引用另一个css文件B时，只有等css文件 A下载完解析时，浏览器才知道还有css文件B需要下载，此时css文件A和css文件B是串行加载的。 如果css文件A和css文件B都是通过link加载，则是并行的。
- 差别3：兼容性的差别。
由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
- 差别4：使用dom控制样式时的差别。
我们可以通过js创建一个link标签，然后加载一个css文件。从而改变某一个dom的样式。而js是无法控制@import的。
let link = document.createElement('link')
link.href = './link.css'
link.rel = 'stylesheet'
document.body.append(link)
不建议使用@import
之所以要把这个删除掉：因为现在大多数项目都会经过webpack、vite这些工具进行打包。打包后@import可能也就被替换掉了，也就不存在下面那些问题了。
- 在webpack中会通过css-loader对@import的默认处理方式如下：
- 在vite中会默认通过posscss-import对@import进行处理：
postcss-import测试：
待转换的css文件：
@import url(@import.css);
.box {
width: 400px;
height: 400px;
background-color: aqua;
}
postcss-import官方例子
// dependencies
const fs = require("fs")
const postcss = require("postcss")
const atImport = require("postcss-import")
// css to be processed
const css = fs.readFileSync("./link.css", "utf8")
// process css
postcss()
.use(atImport())
.process(css, {
// `from` option is needed here
from: "link.css"
})
.then((result) => {
const output = result.css
console.log(output)
})
执行后的输出结果：
Vite+Vue3项目的一个例子：
- 在某一个Vue3+Vite项目的子组件中编写如下css代码：
HelloWorld.vue
<style scoped>
@import url(./HelloWorld.css);
.box {
line-height: 100px;
color: #fff;
}
</style>
HelloWorld.css
.box {
width: auto;
height: 200px;
background-color: red;
}
- 默认情况下vite的处理结果为：
- 原因一：使用@import引入的CSS会影响浏览器的并行下载
使用@import引用的CSS文件只有在引入它的那个CSS文件被下载、解析之后，浏览器才会知道还有另外一个CSS需要下载，这时才会去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致了浏览器无法并行下载所需的样式文件。
案例A：在css文件中@import另一个css文件， 串行加载
link.css
@import url(./@import.css);
.box {
width: 200px;
height: 300px;
background-color: red;
}
@import.css
.box {
width: 100px;
height: 100px;
background-color: green;
}
案例B：2个css文件都使用link加载，并行加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./@import.css" rel="stylesheet" />
<link href="./link.css" rel="stylesheet" />
</head>
<body>
<div class="box"></div>
</body>
</html>
- 原因2: @import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件。
原文链接：https://juejin.cn/post/7356114363881455655 作者：yanessa_yu
