如何使用相对路径在Webpack中使用SCSS(SASS)加载超棒的字体?

node.js CSS

番长猴子

2020-03-18

我的node_modules文件夹中的字体很棒,因此我尝试将其导入到主.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另一个文件,并使用该文件的文件夹作为主文件夹,以便其相对路径按预期工作?

第2086篇《如何使用相对路径在Webpack中使用SCSS(SASS)加载超棒的字体?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
Itachi十三村村 2020.03.18

有关说明,请参见角度网站。 包括真棒字体

Green米亚 2020.03.18

采用

$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;

如此处所述:http : //fontawesome.io/get-started/

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android