Q&A
何をしたときにどこに表示されるエラーなのかの追記をお願いします。
コマンド実行したときにターミナルに表示されるものなのか、ブラウザのconsoleなどのエラーなのか、それともエディタのどこかに表示されるエラーなのか、それ以外なのか、分かりません。
現状だとソースコードも何もなくて、他の人が状況を再現できないので回答するのが難しいです。
せめてhtmlを記載したソースは必要なのではないでしょうか。
実現したいこと
下記の質問からBreezeを利用した認証機能を作成しているのですが、デザインの箇所でロゴが大きくなり、フォームのデザインがいびつになってしまいました。
認証機能ページに関わるファイルを調べたところ、cssの箇所でunknown at rule @tailwindの表示があったので、ここが原因になっているのではないかと思いました。
発生している問題・エラーメッセージ
!追記!
下記のエラーはエディター箇所で表示されていました。
赤い箇所を触ると、下記のエラーが表示されました。
unknown at rule @tailwind
！追記！
上記のエラーを開所してもデザインは崩れたままでした。
コンソールに書いてある、エラーを載せさせていただきます。
Mixed Content: The page at 'https://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/login' was loaded over HTTPS, but requested an insecure stylesheet 'http://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/build/assets/app-CB8Dc99X.css'. This request has been blocked; the content must be served over HTTPS. login:15 Mixed Content: The page at 'https://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/login' was loaded over HTTPS, but requested an insecure script 'http://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/build/assets/app-CjgZ9Ty2.js'. This request has been blocked; the content must be served over HTTPS. login:15 Mixed Content: The page at 'https://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/login' was loaded over HTTPS, but requested an insecure stylesheet 'http://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/build/assets/app-CB8Dc99X.css'. This request has been blocked; the content must be served over HTTPS. login:29 Mixed Content: The page at 'https://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/login' was loaded over a secure connection, but contains a form that targets an insecure endpoint 'http://4611880d2cb5445d9b3c784b0194dfa8.vfs.cloud9.ap-northeast-1.amazonaws.com/login'. This endpoint should be made available over a secure connection.
該当のソースコード
resources/css/app.css
1@tailwind base; 2@tailwind components; 3@tailwind utilities;
resources/views/layouts/app.blade.php
1<!DOCTYPE html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="csrf-token" content="{{ csrf_token() }}"> 7 8 <title>{{ config('app.name', 'Laravel') }}</title> 9 10 <!-- Fonts --> 11 <link rel="preconnect" href="https://fonts.bunny.net"> 12 <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" /> 13 14 <!-- Scripts --> 15 @vite(['resources/css/app.css', 'resources/js/app.js']) 16 </head> 17 <body class="font-sans antialiased"> 18 <div class="min-h-screen bg-gray-100"> 19 @include('layouts.navigation') 20 21 <!-- Page Heading --> 22 @if (isset($header)) 23 <header class="bg-white shadow"> 24 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> 25 {{ $header }} 26 </div> 27 </header> 28 @endif 29 30 <!-- Page Content --> 31 <main> 32 {{ $slot }} 33 </main> 34 </div> 35 </body> 36</html>
試したこと
下記決方法を調べたのですが、どれもVSCodeで利用している方法なのですが、Cloud9でも活用できるのかが分かりません。
補足情報（FW/ツールのバージョンなど）
PHP8
Laravel10
回答2件
0
ベストアンサー
Cloud9のエディタ設定がわからないとのことなので画面コピーを添付します
私自身、Cloud9を初めて開いたので細かな機能については分かりません。
投稿2024/03/07 10:44
総合スコア2731
ありがとうございます。
無事、試すことが出来ましたが、ログインページのデザインは崩れたままでした。
ログインページのコンソールを確認して、書いてあるエラー文を質問に載せて頂きます。
質問は
unknown at rule @tailwindのエラーの解消方法
じゃないんですか？
答えたら違う質問を追加するのは、後でこの質問を読んだ人が訳がわからなくなるので控えて欲しいです
エラー自体はhttpsなサイトなのにhttpなコンテンツが読めないというものです。
scriptタグなどがhttpsで出力されるようにしましょう。
誠に申し訳ありませんでした。
新しい質問を立てさせて頂きます。
0
@tailwind base; といった記述はcssの記述として正しくないため、エラーとなっています。
この警告が表示されないようにするには、Tailwind CSS公式の拡張などのPostCSSに対応した拡張機能をインストールする必要があります。
https://tailwindcss.com/docs/editor-setup
投稿2024/03/06 09:37
総合スコア2731
Cloud9を使用しているのですが、VSコード用で拡張することは可能でしょうか。
Cloud9のエディタはたいした機能がついてないので、正しく読み込ませることはできないです。
・View -> Syntaxでscssやplain textを選択し、開き直す
・VSCodeのSSH接続を利用してCloud9環境に接続する (Cloud9のエディタを使わず、VSCodeを使う)
どちらかになると思います。
>View -> Syntaxでscssやplain textを選択し、開き直す
すみません。こちらを試させて頂こうと思ったのですが、やり方がいまいち分からないので、参考になりそうなドキュメントやサイトを探しているのですが、見つからないのですが、Laravelのドキュメントに載っていますか。
Clouod9の操作の話ですから、Laravelは関係ないです。
すみません。
ちょっとやり方が分からなかったので調べてみて、下記のサイトの方法3に書いてある、cssの記述の変更を試しましたが、デザインが整う事はありませんでした。
他の方法も試してみます。
・【Tailwind CSS】Unknown at rule @tailwind解消法【VSCode】
https://qiita.com/P-man_Brown/items/bf05437afecde268ec15
あなたの回答
tips
プレビュー
