【Laravel Mix】ソースマップを出力する設定方法|Sass・JavaScript

今回は、Laravel MixでSass・JavaScriptなどをコンパイルした際に、ソースマップを出力する設定方法となります。

また、今回の例ではLaravel Mix をすでにインストールしている前提としています。Laravel Mix のインストール方法などについては、以下のリンク先を参考にしてみてください。

【Laravel Mix】Sass・JavaScriptのソースマップを出力する設定方法

Laravel Mixでは、設定をwebpack.mix.jsファイルで管理します。

以下、webpack.mix.jsに、ソースマップを出力する.sourceMaps()メソッドを追加した設定例となります。

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps(true, 'inline-source-map');

上記のように.sourceMaps()メソッドを追記して保存後、以下のnpm-scriptsのコマンドを実行します。

それにより、ファイルを監視して、ファイルが更新されたら自動でコンパイルを行い、その際にソースマップを出力します。

npm run watch

以上が、Sass・JavaScriptなどをコンパイルした際に、ソースマップを出力する設定方法となります。

また、.sourceMaps()メソッドの詳細については、文末の参考サイトを確認してみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。