CSS`url()`中的`~`代码是什么？

Question

例如 @import url("~./foobar");

在这里看到它,不确定它是否是某些包特定的东西或它是否是真正的CSS语法.

Answer 1

在CSS@import路径<url>通常是相对于当前的工作目录.

因此~,在路径开头使用前缀告诉Webpack加载器从节点模块路径解析导入"就像一个模块".

这意味着如果您有一个名为normalizeinstalled 的节点模块,并且您需要导入一个属于它的名为的文件/normalize.css,您可以使用以下命令:

@import "~normalize/normalize.css";

在您的链接示例中,内部font-loader/example/test.js有一个名为的模块的导入font-boon.

var boon = require('./font-boon');

里面font-loader/example/test.css的字体福音模块@imported使其可用text.css.

@import url("~./font-boon");

Answer 2

使用 @import 语句假定您正在从node_modules文件夹导入。例如，如果您尝试导入 bootstrap.css，您可以使用

@import "~bootstrap/dist/css/bootstrap.css"

也就是说，您要放置相对于 node_modules 文件夹的路径。

Answer 3

2021 年 3 月更新

从sass-loader波浪号 '~' 导入已被弃用，建议将其删除。