【Laravel】Laravel Mixを使ってみるよ

LaravelではLaravel Mixというツールを使ってSCSSからCSSを生成することができます。

今回はこれを使ってみようと思います。

以下、設定を備忘録として載せておきます。

手順

まずLavavel Mixで追加で実行するモジュールをインストールします。

これはsrcディレクトリで行います。

$ npm i -D postcss-text-stroke

PostCSSのtext-strokeプラグインをインストールしてみました。
text-strokeは文字の縁取りをしてくれるやつですね。

これは便利なんですが非標準となっていおり、使用しないようにとMDNに書かれています。

でも使いたい！

そんな時は、PostCSSを使うことで代替手段でいい感じにCSSを書き換えて再現してくれます。

便利ですね。

インストールが終わったらLaravel Mixの設定を一部修正します。

webpack.mix.jsというファイルを編集します。

// 変更前

.sass('resources/assets/sass/app.scss', 'public/css')

// 変更後

mix.sass("resources/sass/app.scss", "public/css").options({
  postCss: [require("postcss-text-stroke")()],	# 非推奨のtext-stroke属性を良い感じに変換
  autoprefixer: {    # laravel Mix自体にautoprefixerは含まれるため、下記一部設定のみ追加
    options: {
       grid: true
    }
  }
});

# コンパイル時の通知をオフにするオプション
# コンパイル毎に通知が出てもうざくない人はこれはいりません。
mix.disableNotifications();

# 本番環境以外ならソースマップを追加
if (!mix.inProduction()) {
  mix.webpackConfig({
    devtool: "inline-source-map"
  }).sourceMaps();
}

？行目はブラウザの検証モードでスタイルのソース（cssファイルの行番号）をscssでの該当の行番号の表示に変更するオプションです。

これで準備は完了です。

で、これを実行するには以下のコマンドを使います。

これらはpackage.jsonのある場所で実行します。

補足

scssファイルの場所はresources/sass/にあります。

実際にHTMLで読み込んで使用するのはapp.cssになるので、app.scssに各種scssファイルを@importしてscssを記述していきます。

コンパイル後のapp.cssファイルはpublic/css/app.cssになります。
これをviewに読み込んであげればOKですね。

おわりに

ということで、Laravel Mixを使ってみました。
他にもJavaScriptもコンパイル、minifyできるので便利ですね。

それではよいLaravelライフを！