株式会社NextCode
2023/03/05
Laravel9 ViteでSCSSを使う方法
既にViteの設定が終わっている状態を前提としています。
まだ設定が終わっていない場合は、Vite導入の記事を出していますので、ご覧ください。
SCSSを使用する方法
「vite.config.js」を編集
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コンポーネントの記述
<head>
...etc
@vite(['resources/css/app.css', 'resources/scss/app.scss', 'resources/js/app.js'])
</head>
SASSのインストール
npm install -D sass
起動またはビルド
npm run dev
または
npm run build
ビルドをすると「public/build」にCSSに変換されて配置されます。
buildしてもコンパイルされない場合
app.scss以外でAdminTemplateを使用したり、ライブラリを使用しようとした時に「public/build」ディレクトリに配置されないといったことが発生した場合。
（下記例を参照）
<head>
...etc
@vite(['resources/scss/sb-admin-2.scss'])
</head>
原因は単純でvite.config.jsに追記忘れ。
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を削除する。
npm uninstall -D sass
SASSのバージョンが1.32.13をインストールする。
npm install -D sass@1.32.13
あとは、「npm run dev」または「npm run build」を叩けば、変なWarningが出ずに行えるかと思います！
