问CSS ` `url()`中的`~`代字号是做什么的？

EN

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

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

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

@import "~normalize/normalize.css";

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

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

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

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

2021年3月更新

不推荐使用sass-loader代字号'~‘导入，建议将其删除。

使用@import语句假设您是从node_modules文件夹导入。例如，如果您尝试导入bootstrap.css，则可以使用

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

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