例如:
@import url("~./foobar");
我在这里看到过,不确定它是某个特定的软件包的语法还是CSS实际语法。@import url("~./foobar");
我在这里看到过,不确定它是某个特定的软件包的语法还是CSS实际语法。CSS @import
路径 <url>
通常相对于当前工作目录。
因此,在路径开头使用前缀~
告诉 Webpack 的 css-loader 去解析这个导入,就像从 node_modules
目录开始“解析模块”。
这意味着,如果您安装了一个名为normalize
的 node 模块,并且您需要从其中导入一个名为/normalize.css
的 css 文件,则可以使用以下代码实现:
@import "~normalize/normalize.css";
在您提供的示例中,在font-loader/example/test.js
文件中,导入了名为font-boon
的模块。
var boon = require('./font-boon');
在font-loader/example/test.css
文件中,通过@import导入了font-boon模块,以便在text.css
文件中使用。
@import url("~./font-boon");
~
符号包含了node_module
的路径吗? - adrianriyadicss-loader
处理了~
,而原始的postcss-import
不支持它。参考链接:https://webpack.js.org/loaders/css-loader/#import 和 https://github.com/postcss/postcss-loader/issues/166#issuecomment-275169151。 - Nickolay2021年3月更新
从sass-loader开始,波浪线“~”引入已经被弃用,建议将其移除。
sass-loader
中的~
导入已被弃用,但在css-loader
中没有被弃用。参见:https://webpack.js.org/loaders/css-loader/#url - Andrew使用@import语句假定您正在从 node_modules 文件夹中导入。例如,如果您要导入bootstrap.css,则应使用
@import "~bootstrap/dist/css/bootstrap.css"
这意味着你正在相对于node_modules文件夹放置路径。