laravel8 vue3 scss を読み込めない

2532 ワード
laravel8 Vue3 Vue3 テキストリンク

vue3をやっていたら scss を読み込めない。
laravel を使って vue3 をやる場合は少し特殊なのか？

/resources/css/app.scss

body {
    background-color: pink !important;
}
vue.blade.php

<link href="{{ mix('css/app.css') }}" rel="stylesheet">
webpack.min.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

//ここのsass ってのが重要
mix.js('resources/js/app.js', 'public/js').vue().version()
    .sass('resources/css/app.scss', 'public/css', [
]);

ちなみに

npm run prod をするとcssもjsも自動で圧縮される。

以上