我正在将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
文件夹?谢谢。
我可能在我的问题中应该提到的一件事是,我正在使用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