最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

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

IT培训 admin 5浏览 0评论

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

我的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另一个文件,并使用该文件的文件夹作为主文件夹,以便其相对路径按预期工作?

回答如下:

使用

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

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

我的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另一个文件,并使用该文件的文件夹作为主文件夹,以便其相对路径按预期工作?

回答如下:

使用

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

发布评论

评论列表 (0)

  1. 暂无评论