CSS‘ url()’中的‘ ~’波浪线有什么作用？

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

因此，在路径的开始使用前缀 ~告诉 Webpack 的 css-loader“ like a module”解析导入，从 node_modules目录开始。

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

@import "~normalize/normalize.css";

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

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

在 font-loader/example/test.css内部，font-boon 模块是@import 的，因此在 text.css中可以使用。

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

使用@import 语句假设您是从 Node _ module文件夹导入的。因此，例如，如果您试图导入 bootstrap.css，您将使用

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

也就是说，您要放置相对于 node _ module 文件夹的路径。

更新日期: 2021年3月

从 装弹手波浪形“ ~”进口是不推荐的，建议删除。