Laravel Mix 사용법

참조 : https://laravel.com/docs/10.x/mix
참조 : https://github.com/laravel-mix/laravel-mix/tree/master/docs

목적

Lavavel Mix는 npm으로 설치된 node_modules 내의 js 나, css 혹은 사용자가 정의한 resources를 다시 컴파일 하여 하나의 js 나 css 파일로 만들어 준다. 또한 sass 등으로 정의된 css를 일반적인 css 파일로 전환을 한다.

사용법

1. webpack.mix.js 수정하기

webpack.mix.js 파일을 오픈하여 수정한다. 간단한 예를 아래에 기술하였다.

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])

// bootstrap.css 및 사용자가 작성한 my.css를 하나로 묶어 public/assets/app.css 파일로 저장한다.
mix.styles([
    'node_modules/bootstrap/dist/css/bootstrap.css',
    'resources/css/my.css'
], 'public/assets/app.css').version();

// bootstrap.js 및 사용자가 작성한 my.js 하나로 묶어 public/assets/app.js 파일로 저장한다.
mix.scripts([
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'resources/js/my.js',
], 'public/assets/app.js').version();

// sass file을 css 로 변경후 front.css 로 출력합니다.
mix.sass('resources/sass/front.scss', 'public/css');

// material-design-iconic-font 를 public/assets/fonts 폴더로 copy한다.
mix.copy([
     'node_modules/material-design-iconic-font/dist/fonts/'
], 'public/assets/fonts');

mix.copy([
    'node_modules/@fortawesome/fontawesome-free/webfonts/'
], 'public/assets/app/webfonts');

2. 실행하기

이제 콘솔로 접속하여 아래 명령어 중 하나를 입력하자

npm run dev // 개발모드로 실행
npm run production // production 모드로 실행(자동으로 minimize됨)

3. 적용하기

지정된 폴더에 파일 생성된 것을 확인하고 blade에서 include 하여 사용하면 끝이다.

예제1 FontAwesome 적용하기

font-awesom은 css와 font파일이 분리되기 때문에 이 부분을 함께 마주어 주어야 정상적으로 디스플레이 됩니다.
먼저 install 하기전에 font-awesome은 free(무료) 버전과 pro(유료) 버전이 존재하고 또한 유료버전에도 3개의 종류로 나눔니다.

font-awesome 4.x 예제

npm install

npm i font-awesome // 4.x 대가 install 됩니다.

resource 파일 수정

• resources/sass/app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// 내부기타 파일들을 링크 걸때
@import "./customize.scss";

//Font Awesome
@import "node_modules/font-awesome/scss/font-awesome.scss";

webpack.mix.js 파일 수정

mix.sass('resources/sass/app.scss', 'public/css/app.css', {
    sassOptions: {
      quietDeps: true,
    },
  }
);

font-awesome 6.x 예제

install

npm i npm i @fortawesome/fontawesome-free // 현재(24년 6월) 6.x 대가 install 됩니다.

resource 파일 수정

• resources/sass/app.scss

@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';

html에 삽입

아래는 html에 삽입시 여러가지 경우를 나타낸 것이다.

• mix : mix를 사용하게 되면 css/app.css?id=ddeccd052c7874fd9e581456087209cf 처럼 일련번호가 붙어서 캐쉬적용을 받지 않는다.
• Html을 사용하면 laravel에서 제공하는 기본 html 양식으로 보여준다.

<link media="all" type="text/css" rel="stylesheet" href="{{ mix('/css/app.css') }}">
<link media="all" type="text/css" rel="stylesheet" href="https://www.onstory.fun/css/app.css?id=ddeccd052c7874fd9e581456087209cf">

에러대처

cross-env: not found 에러 발생시

npm install cross-env			

spawn node_modules/webpack/bin/webpack.js ENOENT 에러 발생시 최악의 경우 아래처럼 모든 것을 지우고 다시 해 보시기 바랍니다.

rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install