わい「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
ちゅう二種類のpublicディレクトリまでのパスを返すヘルパー関数
があるやろ?」
わい「今回はローカル開発でSSHちゃうから、asset使っていくで。」
こんな感じですね。
<link href="{{ asset('css/sign_up.css') }}" rel="stylesheet">
<link href="{{ asset('css/sign_in.css') }}" rel="stylesheet">
わい「各自読み込みたいbladeテンプレートで書いてくれな。」
わい「そしたら実際にそのページにアクセスしてみるんや。」
わい「アクセスと同時にコンパイルされるから、見た目に反映されとるな?」
わい「cssディレクトリ内にcssがコンパイルされてたら成功やで!」
わい「お疲れさん😼!!」
お疲れ様でした😌