web-dev-qa-db-ja.com

Laravel生成フォントを別のディレクトリにミックス

webpackの上に構築されるlaravel-mixを使用しています。フォントディレクトリに問題があります。たとえば、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ディレクトリにはcssおよび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ファイルで変更する必要がある変更.

laravellaravel-mix
8
Ven Nilson

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;

機能するアセットをコンパイルします。

3
Ahmad Hussnain

Laravel-mixを使用して、public/fontsからpublic/assets/fontsディレクトリ、このコードをwebpack.mix.js

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

このように直接コピーしてみてください：

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

または、ファイルを1つずつコピーできます。

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