Laravel Mix generate fonts into another directory

问题

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

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

resources:.
└───asset
    └───sass
        │   main.scss
        │
        └───font-awesome (directory)

main.scss contains code:

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

webpack.mix.js contains:

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

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

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

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

回答1:

1:First Create a explicit folder structure:

like this in your laravel project.

public/fonts/vendor/font-awesome

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

2:Change $fa-font-path variable value:

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.

回答2:

If you want to use the laravel-mix and try to change public/fonts to public/assets/fonts directory, You can use this code in your webpack.mix.js

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

回答3:

Try to copy them directly like this :

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

Or you can copy files one by one :

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

来源：https://stackoverflow.com/questions/50860679/laravel-mix-generate-fonts-into-another-directory

标签

laravel

laravel-mix