Laravel Mix将字体生成到另一个目录

Question

我正在使用laravel-mix建在的顶部webpack。我遇到了字体目录问题。例如，font-awesome程序包有一个scss文件和一个放置所有字体的字体目录。

font-awesome:.
????scss
?       fontawesome.scss
????webfonts
        fa-regular-400.eot
        fa-regular-400.svg
        fa-regular-400.ttf
        fa-regular-400.woff
        fa-regular-400.woff2

所以我把这个包放在我的resources/assets/sass目录中。

resources:.
????asset
    ????sass
        ?   main.scss
        ?
        ????font-awesome (directory)

main.scss 包含代码：

@import 'font-awesome/scss/fontawesome';

webpack.mix.js 包含：

mix.sass('resources/assets/sass/main.scss', 'public/css/frontend.css');

所有资产均已成功编译。现在public目录有一个cssand font目录，其中包含所有这样的字体。

public:.
?   index.php
?
????css
?       frontend.css
?
????fonts
?       fa-regular-400.eot
?       fa-regular-400.svg
?       fa-regular-400.ttf
?       fa-regular-400.woff
?       fa-regular-400.woff2

但是我想要的是，我不想将所有字体都编译到public/fonts要编译为以下结构的目录中public/fonts/vendor/font-awesome

public:.
????css
?       frontend.css
?
????fonts
    ????vendor
        ????font-awesome
                fa-regular-400.eot
                fa-regular-400.svg
                fa-regular-400.ttf
                fa-regular-400.woff
                fa-regular-400.woff2

我需要在webpack.mix.js文件中进行哪些更改。

Answer 1

如果你想使用laravel混合，并试图改变public/fonts到public/assets/fonts目录，您可以使用此代码的webpack.mix.js

let mix = require('laravel-mix');
mix.config.fileLoaderDirs.fonts = 'assets/fonts';

Answer 2

1.首先创建一个明确的文件夹结构：

在你的 Laravel 项目中是这样的。

public/fonts/vendor/font-awesome

将所有字体从font-awesome包移动到上述目录。

2. 更改 $fa-font-path 变量值：

font-awesome目录中有一个_variables.scss在该文件中调用的文件，其中有一个变量名为$fa-font-path将值更改为这样的值。

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

编译你的资产，它会起作用。

Answer 3

尝试像这样直接复制它们：

mix.copyDirectory('assets/font-awesome/webfonts', 'public/fonts');

或者，您可以一张一张地复制文件：

mix.copy('assets/font-awesome/webfonts/example.ttf', 'public/fonts/example.ttf');