Laravel에 Sass를 3분 내에 도입

와이「css 직접 치거나 레거시 종려 죽어도 직접 치고 싶지 않아」

와이「언제나처럼 Sass로 빙글빙글 돌리고 싶지 않나? 하야 도입잖아!」

과연 분명히. 초보자이므로 가장 쉬운 방법으로 부탁드립니다.

Composer 구성 파일에 Sass 추가

우선, Laravel의 composer.json 파일이군요.

와이「composer.json이란, 의존하는 패키지를 정의하기 위한 파일이야」



이런 설명이 있네요.

"require-dev": {
    "filp/whoops": "~2.0",
    "fzaninotto/faker": "~1.4",
    "mockery/mockery": "~1.0",
    "phpunit/phpunit": "~6.0",
    "symfony/thanks": "^1.0"
},

와이「이 require-dev 츄는, 뭐 간단하게 말하면 本番環境で必要のない開発環境用のパッケージを記述 시토루야.」

와이「이 부분을 이렇게 해.」

"require-dev": {
    "filp/whoops": "~2.0",
    "fzaninotto/faker": "~1.4",
    "mockery/mockery": "~1.0",
    "phpunit/phpunit": "~6.0",
    "symfony/thanks": "^1.0",
    "panique/laravel-sass": "dev-master"
},

추가한 것은 이 패키지뿐입니다.

"panique/laravel-sass": "dev-master"

SCSS를 CSS로 변환하는 처리 추가

와이「이하의 파일의 마지막행에 하기를 추가했다고.」

public
   |_index.php

SassCompiler::run("scss/", "css/");

과연 scss 디렉토리의 파일을 css 디렉토리로 컴파일한다는 것을 알 수 있습니다.

Sass 파일을 저장하는 디렉토리 추가

와이「public 이하에 scss 디렉토리(폴더)를 작성해라―.」

composer에서 Sass 설치 수행

와이「이하의 커맨드를 실행!!」

$ composer update

와이「이걸로 모든 준비가 됐네.

와이「필요한 패키지도 composer update로 들어갔고, 나머지는 간단해.」

SCSS 파일 만들기

어떤 확인을 위해 scss 파일 만들 것입니까?

CSS 로딩

와이「그랬더니, 앞으로 가서 コンパイルされるであろうcssの読み込み 해두자.」

와이「Laravel에서는 secure_asset 와 asset 2종류의 public 디렉토리까지의 패스를 돌려준다 ヘルパー関数 있어?」

와이「이번은 로컬 개발로 SSH 버리니까, asset 사용해 나갈게.」

이런 느낌이군요.

<link href="{{ asset('css/sign_up.css') }}" rel="stylesheet">
<link href="{{ asset('css/sign_in.css') }}" rel="stylesheet">

와이「각자 읽고 싶은 blade 템플릿으로 써줘.」

와이「그렇다면 실제로 그 페이지에 액세스해 보겠지.」



와이「액세스와 동시에 컴파일되기 때문에, 외형에 반영되겠지?」
와이「css 디렉토리내에 css가 컴파일 되고 있으면 성공야에서!」

와이「수고하셨습니다😼!!」

고마워요 😌