328 - 《CSS Import》

工作需要，深入了解了下 CSS Import 相关的知识。

1、@import url("foo.css") 和 @import "foo.css" 效果完全一致。

2、@import url("foo.css") 引用的是相对路径的 foo.css，而不是 node_modules 依赖里的 foo.css npm 包。注意，这和 JS 里 import 和 require 的逻辑是不同的。那怎么在 CSS 里 import npm 包依赖？webpack 的约定是用「~」前缀，比如 @import url("~foo.css") 。

3、CSS 里通过 url 引用 assets 比如图片、字体时，始终是以当前 CSS 路径开始去找相对路径，所以无需像 JS 里一样去加 publicPath。

4、CSS 里的 @import 顺序和 JS 里的 import 的导入顺序（或者叫优先级）是不同的。JS 里已 import 的模块不会重复执行，以第一次为准；CSS 里 @import 的模块会重复 @import，而由于 CSS 里的优先级规则，所以会以最后一个为准。

比如：

/* index.css */
@import "a.css";
@import "b.css";

/* a.css */
@import "c.css";
.a {}

/* b.css */
@import "c.css";
.b {}

/* c.css */
.c {}

那产物会是这样。

.c {}
.a {}
.c {}
.b {}

而由于 .c {} 是重复的，在有些构建工具里会自动删掉第一个 .c {}。比如 esbuild 里会做删除的事，而 webpack 里不会。

对比下，如果用 JS 的逻辑来引用 CSS。

// index.js
import 'a.js';
import 'b.js';

// a.js
import 'c.css';
import 'a.css';

// b.js
import 'c.c