web-dev-qa-db-fra.com

Laravel Mix générer des polices dans un autre répertoire

J'utilise laravel-mix qui est construit sur le dessus du webpack. Je suis confronté à un problème avec le répertoire des polices. Par exemple, font-awesome le package a un fichier scss et un répertoire de polices où toutes les polices sont placées.

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

Je place donc ce paquet dans mon resources/assets/sass répertoire.

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

main.scss contient du code:

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

webpack.mix.js contient:

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

Tous les actifs sont compilés avec succès. Maintenant, le répertoire public a un répertoire css et font, qui a toutes les polices comme celle-ci.

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

Mais ce que je veux, c'est que je ne veux pas compiler toutes les polices dans public/fonts répertoire que je veux compiler comme structure suivante 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

Quels changements dois-je changer dans webpack.mix.js fichier.

laravellaravel-mix
8
Ven Nilson

1: Créez d'abord une structure de dossiers explicite:

comme ceci dans votre projet laravel.

public/fonts/vendor/font-awesome

Déplacez toutes vos polices de font-awesome package dans le répertoire mentionné ci-dessus.

2: Modifier la valeur de la variable $ fa-font-path:

font-awesome le répertoire contient un fichier appelé _variables.scss à l'intérieur de ce fichier, il y a une variable nommée $fa-font-path changez la valeur en quelque chose comme ça.

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

Compilez vos actifs, cela fonctionnerait.

3
Ahmad Hussnain

Si vous souhaitez utiliser le mélange laravel et essayez de changer public/fonts à public/assets/fonts répertoire, vous pouvez utiliser ce code dans votre webpack.mix.js

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

Essayez de les copier directement comme ceci:

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

Ou vous pouvez copier les fichiers un par un:

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