Laravel에서 좋아하는 CSS 프레임 워크 사용

준비

npm이라는 패키지 관리자로 설치합니다.

Laravel 표준의 Bootstrap이 아니라 아무래도 Materialize를 사용하고 싶었기 때문에 이것을 도입합니다.

Materialize 이외에도 npm으로 설치할 수 있다면 그 방법은 동일합니다.

Materialize

환경

Laravel Framework 7.22.4

Materialize 1.0.0

소개

1. Sass를 사용할 수 있도록

먼저 Sass를 사용할 수 있도록 합니다.
간단하고 이해하기 쉬운 기사 링크를 붙여 둡니다.
Laravel에 SCSS를 도입하는 방법

2.Materialize 소개

공식 사이트의 Getting Started에 있는 명령을 넣어 설치합니다.

terminal

npm install materialize-css

3. Materialize를 로드하도록 설정

resources/sass/app.scss

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

↑이 부분을

resources/sass/app.scss

// Materialize
@import '~materialize-src/sass/materialize.scss';

↑로 변경

덧붙여서 풀 패스는 node_modules/materialize-src/sass/materialize.scss 입니다.

4. 변경 사항 적용

terminal

npm run dev

만약을 위해, 컴파일처를 확인합니다.

public/css/app.css

@import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8";

.materialize-red {
  background-color: #e51c23 !important;
}

.materialize-red-text {
  color: #e51c23 !important;
}

.materialize-red.lighten-5 {
  background-color: #fdeaeb !important;
                 ~省略~

materialize-red 등 그와 같은 것이 쓰여져 있으므로 컴파일되고 있는 것 같습니다.

5. 완성

마지막으로 CSS를 적용하려는 뷰 템플릿의 head 태그 중에<link href="{{ asset('/css/app.css') }}" rel="stylesheet">을 써 주면 완성입니다.
layouts/app.blade.php 에 써서 모든 페이지에 적용시키는 것이 좋다고 생각합니다.

번외편：도입되는 구조

여기까지 도입은 가능했습니다.
도입된 구조를 써 보았으므로 시간이 있으면 읽어 보세요.

먼저 프로젝트 폴더 바로 아래의 webpack.mix.js를 엽니다.

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

이 .sass('~') 부분에서 webpack이 resources/sass/app.scss 파일을 컴파일하고 public/css/app.css 에 출력해주는 것 같습니다.

따라서 컴파일 원본 resources/sass/app.scss를 살펴 보겠습니다.

resources/sass/app.scss

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

// Variables
@import 'variables';

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

여기 Bootstrap을 로드했습니다. ~ 부분은 node_modules/가 생략되었습니다.

즉 resources/sass/app.scss 파일로 읽어들이는 패키지를 지정해 컴파일하고 있다고 하는 것이었습니다.