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

Sassのロゴ画像
  • URLをコピーしました!

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)

この記事を書いた人

コメント

コメントする

目次