株式会社NextCode
2023/03/05
Laravel9 ViteでSCSSを使う方法
既にViteの設定が終わっている状態を前提としています。
まだ設定が終わっていない場合は、Vite導入の記事を出していますので、ご覧ください。
SCSSを使用する方法
「vite.config.js」を編集
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import { defineConfig } from 'vite';import laravel from 'laravel-vite-plugin';export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', // ←不要であれば削除してもOK 'resources/scss/app.scss', // ←これを追加 'resources/js/app.js' ], refresh: true, }), ]}); |
SCSSファイルを作成
下記パスの通りにディレクトリ・ファイルを作成する。
resources/scss/app.scssBladeにviteコンポーネントの記述
1 2 3 4 5 | <head> ...etc @vite(['resources/css/app.css', 'resources/scss/app.scss', 'resources/js/app.js'])</head> |
SASSのインストール
1 | npm install -D sass |
起動またはビルド
1 | npm run dev |
または
1 | npm run build |
ビルドをすると「public/build」にCSSに変換されて配置されます。
buildしてもコンパイルされない場合
app.scss以外でAdminTemplateを使用したり、ライブラリを使用しようとした時に「public/build」ディレクトリに配置されないといったことが発生した場合。
（下記例を参照）
1 2 3 4 5 | <head> ...etc @vite(['resources/scss/sb-admin-2.scss'])</head> |
原因は単純でvite.config.jsに追記忘れ。
1 2 3 4 5 6 7 8 9 10 11 12 | export default defineConfig({ plugins: [ laravel({ input: [ 'resources/scss/sb-admin-2.scss', // ←これを追加 'resources/scss/app.scss', 'resources/js/app.js' ], refresh: true, }), ]}) |
SCSSを使用してwarningが出る場合
Admin TemplateやライブラリのSCSSを使用して、「npm run dev」または「npm run build」で次の様なwarningが出る場合はsassのバージョンを変更すればOK。
Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.SASSのバージョンが1.33.0からエラーが出る様になるので、1.32.13をインストールする様にする。
まず、一度SASSを削除する。
1 | npm uninstall -D sass |
SASSのバージョンが1.32.13をインストールする。
1 | npm install -D sass@1.32.13 |
あとは、「npm run dev」または「npm run build」を叩けば、変なWarningが出ずに行えるかと思います！
