CSS `url()` 中的 `~` 波浪号有啥作用？

Posted 2023-02-21

【中文标题】CSS `url()` 中的 `~` 波浪号有啥作用？

【英文标题】：What does a `~` tilde in a CSS `url()` do?CSS `url()` 中的 `~` 波浪号有什么作用？

【发布时间】：2017-01-24 22:26:24

【问题描述】：

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

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

【问题讨论】：

@JackMiller 不，这不是选择运算符，它是文件目录的一部分。

【参考方案1】：

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

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

这意味着如果您安装了一个名为 normalize 的节点模块，并且您需要从其中导入一个名为 /normalize.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");

【讨论】：

so.. 基本上，~ 是否包含 node_module 路径？

~ 显然是 handled by webpack css-loader，raw postcss-import doesn't support it。

【参考方案2】：

2021 年 3 月更新

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

【讨论】：

@cbp 官方链接已经在评论里了...

哦，对不起，我写的时候一定是瞎了眼……

请注意，~ 导入在 sass-loader 中已弃用，但在 css-loader 中未弃用。 webpack.js.org/loaders/css-loader/#url

【参考方案3】：

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

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

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