Laravel Mix将字体生成到另一个目录 [英] Laravel Mix generate fonts into another directory

问题描述

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

I'm using laravel-mix which is built on the top of the webpack. I'm facing a problem with fonts directory. For Example, font-awesome package has a scss file and a font directory where all fonts are placed.

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目录中.

So i place this package in my resources/assets/sass directory.

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目录具有一个css和font目录，该目录具有所有这样的字体.

All assets are compiled successfully. Now public directory has a css and font directory, which has all fonts like this.

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/vendor/font-awesome

But What I want is, I don't want to compile all fonts into public/fonts directory i want to compile as following structure 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文件中进行哪些更改.

What changes that i need to change in webpack.mix.js file.

推荐答案

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

在您的laravel项目中是这样的.

like this in your laravel project.

public/fonts/vendor/font-awesome

将所有字体从font-awesome程序包移至上述目录.

Move all your fonts from font-awesome package to above mention directory.

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

font-awesome目录中有一个名为_variables.scss的文件，该文件中有一个名为$fa-font-path的变量，将值更改为类似的内容.

font-awesome directory has a file called _variables.scss inside that file there is a variable named as $fa-font-path change the value to something like this.

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

编译您的资产即可使用.

Compile your assets it would work.

这篇关于Laravel Mix将字体生成到另一个目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！