CSS中`url()`里的波浪线`~`是什么意思？

Question

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

我在这里看到过，不确定它是某个特定的软件包的语法还是CSS实际语法。

- dontexist

---

不，这不是选择运算符，它是文件目录的一部分。 - Sebastian Simon

Answer 1

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

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

这意味着，如果您安装了一个名为normalize的 node 模块，并且您需要从其中导入一个名为/normalize.css的 css 文件，则可以使用以下代码实现：

@import "~normalize/normalize.css";

---

在您提供的示例中，在font-loader/example/test.js文件中，导入了名为font-boon的模块。

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

在font-loader/example/test.css文件中，通过@import导入了font-boon模块，以便在text.css文件中使用。

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

- ksav

---

基本上，~符号包含了node_module的路径吗？ - adrianriyadi

显然，webpack的css-loader处理了~，而原始的postcss-import不支持它。参考链接：https://webpack.js.org/loaders/css-loader/#import 和 https://github.com/postcss/postcss-loader/issues/166#issuecomment-275169151。 - Nickolay

Answer 2

2021年3月更新

从sass-loader开始，波浪线“~”引入已经被弃用，建议将其移除。

- TheBosti

---

请注意，sass-loader中的~导入已被弃用，但在css-loader中没有被弃用。参见：https://webpack.js.org/loaders/css-loader/#url - Andrew

Answer 3

使用@import语句假定您正在从 node_modules 文件夹中导入。例如，如果您要导入bootstrap.css，则应使用

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

这意味着你正在相对于node_modules文件夹放置路径。

- KalC