[Laravel] Viteのnpm run devでcssが適応されない

実現したいこと

Laravel Viteのnpm run devで、正しくcssが反映されるようにしたいです。
(現状、npm run publicd後だと正しくcssが反映されます)

前提

現状、npm run publicd後だと正しくcssが反映されます。
しかし、npm run devでViteサーバを立ち上げたとたん、cssが反映されずコンソールに以下のようなエラーメッセージが出ます。

自作のページのエラー

tweet:10     GET http://0.0.0.0:5173/@vite/client net::ERR_ADDRESS_INVALID
tweet:10     GET http://0.0.0.0:5173/resources/css/app.css net::ERR_ADDRESS_INVALID

ログインページのエラー

ailed to load resource: net::ERR_ADDRESS_INVALID     client:1
app.css:1     Failed to load resource: net::ERR_ADDRESS_INVALID
app.js:1     Failed to load resource: net::ERR_ADDRESS_INVALID

該当のソースコード

自作のページとログインページを例として取り上げます。

自作のページ
resources/views/tweet/index.blade.php

php
1<x-layout title="TOP | つぶやきアプリ">
2    <x-layout.single>
3        <h2 class="text-center text-blue-500 text-4xl font-bold mt-8 mb-8">
4            つぶやきアプリ
5        </h2>
6        <x-tweet.form.post></x-tweet.form.post>
7    </x-layout.single>
8</x-layout>

resources/views/components/layout.blade.php

php
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport"
6          content="width=device-width, user-scalable=no, initial-scale=1.0,
7          maximum-scale=1.0, minimum-scale=1.0">
8    <meta http-equiv="X-UA-Compatible" content="ie=edge">
9   <!-- <link href="css/app.css" rel="stylesheet">-->
10    @vite('resources/css/app.css')
11    <title>{{ $title ?? 'つぶやきアプリ' }}</title>
12</head>
13<body class="bg-gray-50">
14    {{ $slot }}
15</body>
16</html>

login画面

php
1<x-guest-layout>
2    <!-- Session Status -->
3    <x-auth-session-status class="mb-4" :status="session('status')" />
4
5    <form method="POST" action="{{ route('login') }}">
6        @csrf
7
8        <!-- Email Address -->
9        <div>
10            <x-input-label for="email" :value="__('Email')" />
11            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
12            <x-input-error :messages="$errors->get('email')" class="mt-2" />
13        </div>
14
15        <!-- Password -->
16        <div class="mt-4">
17            <x-input-label for="password" :value="__('Password')" />
18
19            <x-text-input id="password" class="block mt-1 w-full"
20                            type="password"
21                            name="password"
22                            required autocomplete="current-password" />
23
24            <x-input-error :messages="$errors->get('password')" class="mt-2" />
25        </div>
26
27        <!-- Remember Me -->
28        <div class="block mt-4">
29            <label for="remember_me" class="inline-flex items-center">
30                <input id="remember_me" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
31                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
32            </label>
33        </div>
34
35        <div class="flex items-center justify-end mt-4">
36            @if (Route::has('password.request'))
37                <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('password.request') }}">
38                    {{ __('Forgot your password?') }}
39                </a>
40            @endif
41
42            <x-primary-button class="ml-3">
43                {{ __('Log in') }}
44            </x-primary-button>
45        </div>
46    </form>
47</x-guest-layout>

login画面のコンポーネントはどこにあるか不明

試したこと

https://qiita.com/konona5/items/21b9834064426f9046d8
ここに書いてある通りに
@vite('resources/css/app.css')→@vite('resources/sass/app.scss')
と書き換えてみましたが、結果は変わりませんでした。
※resources/sass/app.scssと_variables.scssができました

補足情報（FW/ツールのバージョンなど）

Laravel Framework 10.13.5
VITE v4.3.9

行動規範の内容に同意します

回答2件

ベストアンサー

ChatGPTはLaravelに関しては間違いだらけ。

Windows+Sailを使ってるなら必要な情報はこれだけ。
https://laravel.com/docs/10.x/vite#configuring-hmr-in-sail-on-wsl2
Windowsでだけ発生する「よくある質問」の範囲のエラー。

js
1import { defineConfig } from 'vite';
2import laravel from 'laravel-vite-plugin';
3
4export default defineConfig({
5    plugins: [
6        laravel({
7            input: [
8                'resources/css/app.css',
9                'resources/js/app.js',
10            ],
11            refresh: true,
12        }),
13    ],
14    server: {
15        hmr: {
16            host: 'localhost',
17        },
18    },
19});

Laravelはsail up -dでhttp://localhost
Viteはsail npm run devでhttp://0.0.0.0:5173/@vite/client
0.0.0.0が見えないので読み込めずエラー。
hostを指定すると127.0.0.1になって読み込める。
hostを指定しなくてもViteをSail(Docker)の外で動かすnpm run devと127.0.0.1になり発生しない。

投稿2023/06/26 06:00

kawax

総合スコア10377

saitou_san

2023/06/29 11:32

ありがとうございます！おかげさまでrun dev、run build共に正常に動くようになりました。

行動規範の内容に同意します

この回答はGPT-4による自動生成回答です

Laravel ViteでCSSが正しく反映されない問題について、以下の手順を試してみてください。

Viteの設定ファイル vite.config.js をプロジェクトのルートディレクトリに作成します。

javascript
1// vite.config.js
2import { defineConfig } from 'vite'
3import { laravel } from '@vitejs/plugin-legacy'
4
5export default defineConfig({
6  plugins: [
7    laravel()
8  ],
9  server: {
10    host: '0.0.0.0',
11    port: 5173,
12    strictPort: true,
13    hmr: {
14      host: 'localhost',
15      port: 5173,
16    },
17  },
18})

resources/views/components/layout.blade.php ファイルの @vite ディレクティブを以下のように変更します。

php
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport"
6          content="width=device-width, user-scalable=no, initial-scale=1.0,
7          maximum-scale=1.0, minimum-scale=1.0">
8    <meta http-equiv="X-UA-Compatible" content="ie=edge">
9    @vite
10    <title>{{ $title ?? 'つぶやきアプリ' }}</title>
11</head>
12<body class="bg-gray-50">
13    {{ $slot }}
14</body>
15</html>

resources/css/app.css ファイルを resources/css/app.scss にリネームし、resources/sass/_variables.scss をインポートします。

scss
1// resources/css/app.scss
2@import 'variables';
3
4// ここにCSSを記述

resources/sass/_variables.scss ファイルを作成し、必要な変数を定義します。

scss
1// resources/sass/_variables.scss
2$primary-color: #3490dc;
3
4// 他の変数を定義

package.json ファイルに以下のスクリプトを追加します。

json
1{
2  "scripts": {
3    "dev": "vite",
4    "build": "vite build",
5    "serve": "vite preview"
6  }
7}

以下のコマンドを実行して、Viteサーバーを起動します。

bash
1npm run dev

これで、npm run dev を実行した際にCSSが正しく反映されるはずです。もし問題が解決しない場合は、コメントでお知らせください。

投稿2023/06/24 22:45

teratail-ai

saitou_san

2023/06/25 00:18 編集

いわれたとおりに変更してnpm run devを実行しましたが、以下のエラーが出力されました。 ailed to load config from /var/www/html/vite.config.js error when starting dev server: Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@vitejs/plugin-legacy' imported from /var/www/html/vite.config.js.timestamp-1687651116531-c619d3aa6716.mjs at new NodeError (node:internal/errors:399:5) at packageResolve (node:internal/modules/esm/resolve:889:9) at moduleResolve (node:internal/modules/esm/resolve:938:20) at defaultResolve (node:internal/modules/esm/resolve:1153:11) at nextResolve (node:internal/modules/esm/loader:163:28) at ESMLoader.resolve (node:internal/modules/esm/loader:838:30) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18) at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40) at link (node:internal/modules/esm/module_job:76:36)

行動規範の内容に同意します

あなたの回答