node.js - 如何使用相对路径在 Webpack 中使用 SCSS (SASS) 加载 font-awesome？

Question

我的 node_modules 文件夹中有 font-awesome，所以我尝试将它导入到我的主 .scss 文件中，如下所示:

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

但是 Webpack 打包编译失败，告诉我

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 

因为 font-awesome.scss 文件引用了一个相对路径，'../fonts/'。

如何告诉 scss\webpack @import 另一个文件，并将该文件的文件夹用作主文件夹，以便其相对路径按预期工作？

Answer 1

使用

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

$fa-font-path 变量在 font-awesome/scss/_variables.scss

中的位置

$fa-font-path: "../fonts" !default;

波浪号“~”由 sass-loader 使用 the webpack mecanism 插入。 .