Question

E.g。 ref

看到here，不确定它是否是某些特定于软件包的内容，或者它是否是真正的CSS语法。

Answer 1

CSS @import路径<url>通常与当前工作目录相关。

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

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

@import "~normalize/normalize.css";

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

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

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

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

Answer 2

2021 年 3 月更新

从 sass-loader 波浪号 '~' 导入已弃用，建议将其删除。

Answer 3

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

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

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