CSS `url()` 中的 `~` 波浪号有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39535760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does a `~` tilde in a CSS `url()` do?
提问by ahstro
回答by ksav
The CSS @importpath <url>is usually relative to the current working directory.
在CSS@import路径<url>通常是相对于当前的工作目录。
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.
因此，使用~路径开头的前缀会告诉 Webpack 加载器“像模块一样”从节点模块路径解析导入。
What that means is that if you have a node module called normalizeinstalled, and you need to import a file from within it named /normalize.css, you can do that with:
这意味着，如果您安装了一个名为的节点模块normalize，并且您需要从其中导入一个名为的文件/normalize.css，您可以使用以下命令：
@import "~normalize/normalize.css";
In your linked example, inside font-loader/example/test.jsthere is an import of a module called font-boon.
在您链接的示例中，里面font-loader/example/test.js有一个名为font-boon.
var boon = require('./font-boon');
Inside of font-loader/example/test.cssthe font-boon module is @imported so that it is available in text.css.
里面font-loader/example/test.css的字体福音模块@imported使其可用text.css。
@import url("~./font-boon");
@import url("~./font-boon");
