【Laradock】Sassを使えるようにするための設定

LaradockでSassを使うための設定をしたので、やり方をメモに残します。

npmとnodeのバージョン確認

まずはnpmとnodeがインストールされているか確認するために、workspaceコンテナに入ってnpmとnodeのバージョンを確認します。

今回は、ルートディレクトリを「my-portfolio」とします。

$ pwd
~/path/to/dir/laradock
$ docker-compose exec workspace bash

$ cd my-portofolio
$ npm -v
6.10.3
$ node -v
v12.10.0

インストールされているのが確認できれば、node_modules/をインストールします。

$ npm install
$ ls
node_modules/

コンパイル先の設定

コンパイル先を設定するために、ルートディレクトリにあるwebpack.min.jsに以下のように追加します。

...省略...
 14  mix.js('resources/js/app.js', 'public/js')
 15      .sass('resources/sass/app.scss', 'public/css')
 16      .sass('resources/sass/styles.scss', 'public/css')
 17      .copyDirectory('resources/images', 'public/images');

コンパイルできるか確認

workspaceコンテナ内のルートディレクトリの中で、npm run watchなど実行してみて、エラーが出なければ成功です。

もし「cross-env: not found」みたいなエラーが出た場合は、こちらの記事を参考にしてみてください。

参考URL

Laravel 5.4 アセットのコンパイル(Laravel Mix)