CSS `url()` 中的 `~` 波浪号有什么作用? [英] What does a `~` tilde in a CSS `url()` do?

问题描述

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

在这里看到了，不确定如果它是一些特定于包的东西，或者它是实际的 CSS 语法.

Saw it here, not sure if it's some package specific thing or if it's actual CSS syntax.

推荐答案

CSS @import path 通常相对于当前工作目录.

The CSS @import path <url> is usually relative to the current working directory.

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

So using the prefix ~ at the start of the path tells Webpack's css-loader to resolve the import "like a module", starting from the node_modules directory.

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

What that means is that if you have a node module called normalize installed, and you need to import a file from within it named /normalize.css, you can do that with:

@import "~normalize/normalize.css";

---

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

---

In your linked example, inside font-loader/example/test.js there is an import of a module called font-boon.

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

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

Inside of font-loader/example/test.css the font-boon module is @imported so that it is available in text.css.

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

这篇关于CSS `url()` 中的 `~` 波浪号有什么作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！