質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

Q&A

解決済

2回答

4678閲覧

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

saitou_san

総合スコア32

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

0グッド

0クリップ

投稿2023/06/24 22:45

実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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 -dhttp://localhost
  • Viteはsail npm run devhttp://0.0.0.0:5173/@vite/client
  • 0.0.0.0が見えないので読み込めずエラー。
  • hostを指定すると127.0.0.1になって読み込める。
  • hostを指定しなくてもViteをSail(Docker)の外で動かすnpm run dev127.0.0.1になり発生しない。

投稿2023/06/26 06:00

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

saitou_san

2023/06/29 11:32

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

0

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

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

  1. 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})
  1. 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>
  1. resources/css/app.css ファイルを resources/css/app.scss にリネームし、resources/sass/_variables.scss をインポートします。

scss

1// resources/css/app.scss 2@import 'variables'; 3 4// ここにCSSを記述
  1. resources/sass/_variables.scss ファイルを作成し、必要な変数を定義します。

scss

1// resources/sass/_variables.scss 2$primary-color: #3490dc; 3 4// 他の変数を定義
  1. package.json ファイルに以下のスクリプトを追加します。

json

1{ 2 "scripts": { 3 "dev": "vite", 4 "build": "vite build", 5 "serve": "vite preview" 6 } 7}
  1. 以下のコマンドを実行して、Viteサーバーを起動します。

bash

1npm run dev

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

投稿2023/06/24 22:45

teratail-ai

Powered by GPT-4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問