>

laravel-mix 를 사용하고 있습니다  그것은 webpack 의 상단에 내장 . fonts 디렉토리에 문제가 있습니다. 예를 들어, font-awesome  package에는 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 에서 변경해야 할 사항  파일.


  • 답변 # 1

    1 : 먼저 명시 적 폴더 구조 만들기 :

    라 라벨 프로젝트에서 이와 같이

    public/fonts/vendor/font-awesome

    font-awesome 에서 모든 글꼴을 이동  위에서 언급 한 디렉토리로 패키지합니다.

    2 : $fa-font-path 변수 값 변경 :

    font-awesome  directory에는 _variables.scss 라는 파일이 있습니다  그 파일 안에는 $fa-font-path 라는 이름의 변수가 있습니다  값을 이와 같이 변경하십시오.

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

    자산을 컴파일하면 작동합니다.

  • 답변 # 2

    라 라벨 믹스를 사용하고 public/fonts 를 변경하려고하면   public/assets/fonts 로  예배 규칙서, 이 코드는 webpack.mix.js 에서 사용할 수 있습니다

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

  • 답변 # 3

    다음과 같이 직접 복사 해보십시오 :

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

    또는 파일을 하나씩 복사 할 수 있습니다 :

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

관련 자료

  • 이전 angular - 헤드리스 크롬을 비활성화하고 터미널 만 사용하는 카르마 구성
  • 다음 R에서 실험적인 desgin의 D- 효율 계산