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

LaradockでSassを使うための設定をしたので、やり方をメモに残します。
npmとnodeのバージョン確認
まずはnpmとnodeがインストールされているか確認するために、workspaceコンテナに入ってnpmとnodeのバージョンを確認します。
今回は、ルートディレクトリを「my-portfolio」とします。
1 2 3 4 5 6 7 8 9 |
$ 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/をインストールします。
1 2 3 |
$ npm install $ ls node_modules/ |
コンパイル先の設定
コンパイル先を設定するために、ルートディレクトリにあるwebpack.min.jsに以下のように追加します。
1 2 3 4 5 |
...省略... 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