CSS \`url()\` 中的 \`~\` 波浪号有什么作用？

Question

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

在这里 看到它，不确定它是特定于包的东西还是实际的 CSS 语法。

原文由 ahstro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS @import path <url> 通常是相对于当前工作目录的。

因此，在路径的开头使用前缀 ~ 告诉 Webpack 的 css-loader 解析“像模块一样”的导入，从 node_modules 目录开始。

这意味着如果您安装了一个名为 normalize 的节点模块，并且您需要从其中导入一个名为 /normalize.css 的 css 文件，您可以这样做：

 @import "~normalize/normalize.css";

---

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

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

在 font-loader/example/test.css 内部， font-boon 模块是 @imported ，因此它在 text.css 中可用。

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

原文由 ksav 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2021 年 3 月更新

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

原文由 TheBosti 发布，翻译遵循 CC BY-SA 4.0 许可协议