LoginSignup
10
7

More than 3 years have passed since last update.

LaravelにSassを3分で導入する

Posted at

わい「css直打ちとかレガシーやし死んでも直接打ちたくないんじゃ」

わい「いつもみたいにSassでぐるぐる回したくないんか?はよ導入じゃい!」(山形弁)

なるほどたしかに。初心者なので、一番簡単な方法でお願いします。

Composerの設定ファイルにSassを追加する

まず、Laravelのcomposer.jsonファイルですよね。

わい「composer.jsonとは、依存するパッケージを定義するためのファイルじゃ」

スクリーンショット 2019-11-21 15.28.34.png

こんな記述がありますね。

"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ディレクトリ(フォルダ)を作成してやー。」

スクリーンショット 2019-11-21 16.15.45.png

composerからSassのインストールを実行

わい「以下のコマンドを実行!!」

$ composer update

わい「これで全ての準備が整ったな。

わい「必要なパッケージもcomposer updateで入ったし、あとは簡単や。」

SCSSファイルの作成

いくつか確認のためにscssファイル作りますか。

スクリーンショット 2019-11-21 15.48.18.png

CSS読み込み

わい「そしたら、先回りしてコンパイルされるであろうcssの読み込みしておこうな。」

わい「Laravelではsecure_assetassetちゅう二種類のpublicディレクトリまでのパスを返すヘルパー関数があるやろ?」

わい「今回はローカル開発でSSHちゃうから、asset使っていくで。」

こんな感じですね。


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

わい「各自読み込みたいbladeテンプレートで書いてくれな。」

わい「そしたら実際にそのページにアクセスしてみるんや。」

スクリーンショット 2019-11-21 16.04.16.png

わい「アクセスと同時にコンパイルされるから、見た目に反映されとるな?」
わい「cssディレクトリ内にcssがコンパイルされてたら成功やで!」

わい「お疲れさん😼!!」

お疲れ様でした😌

10
7
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7