CSS `url()` 中的 `~` 代字号有什么作用？

Question

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

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

Answer 1

CSS @import路径<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");

Answer 2

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

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

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

Answer 3

2021 年 3 月更新

从 sass-loader 波浪号“~”导入已弃用，建议删除。

What does a `~` tilde in a CSS `url()` do?