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.

推荐答案

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

因此，在路径开头使用前缀~告诉Webpack加载器从节点模块路径解析就像模块一样"的导入.

So using the prefix ~ at the start of the path tells the Webpack loader to resolve the import "like a module" from a node module path.

这意味着，如果安装了名为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模块，以便在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屋！