为什么将Font Awesome Sass编译为CSS会在错误的位置创建字体文件夹?

问题描述 投票:0回答:1

我正在将Font Awesome Sass文件编译为CSS,并且将fonts文件夹和所有字体文件放在我项目的根目录下,这是我不希望的。

特别是,我按如下所示安装了免费的Font Awesome npm软件包:

npm install --save-dev @fortawesome/fontawesome-free

然后我将以下内容添加到vendor.scss文件:

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

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';

这是项目的目录结构:

(Project root)
|---fonts (I don't want this one.)
|---node_modules
|   |---@fortawesome
|       |---fontawesome-free
|           |---scss
|               |---_variables.scss (Contains original $fa-font-path being overridden.)
|---public
|   |---css
|   |---fonts (This is the one I want.)
|---src
    |---sass
        |---vendor.scss (Contains new $fa-font-path definition and FA Sass imports.)

如果我将$fa-font-path更改为'../../../public/fonts' !default;'../../public/fonts' !default;,则编译过程将出错并且无法编译,但是'../../../../public/fonts' !default;将所有Font Awesome字体文件放在两个项目根目录下的fonts文件夹中级别和public/fonts文件夹中。为什么要这样做,更重要的是,如何阻止它在根级别创建fonts文件夹?谢谢。

sass fonts font-awesome filepath
1个回答
0
投票

我可能在我的问题中应该提到的一件事是,我正在使用laravel-mix npm模块来包装Webpack并捆绑我的所有资产。

Laravel Mix从其链式调用返回一个承诺,使您可以在其末尾调用then,从中我可以在then回调中编写一些自定义代码,以始终删除位于以下位置的fonts目录项目根目录级别。

具体地说,我的Mix文件变成了以下文件:

 const mix = require('laravel-mix');
 const rimraf = require('rimraf');

 mix.js('src/js/app.js', 'public/js/')
    .extract(['vue'])
    .sass('src/sass/vendor.scss', 'public/css/')
    .sass('src/sass/app.scss', 'public/css/')
    .then(() => {
        rimraf.sync('fonts');
    });

rimraf是一个npm模块,基本上允许您在目录上运行rm -fr。可以在这里获取模块:https://www.npmjs.com/package/rimraf

© www.soinside.com 2019 - 2024. All rights reserved.