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

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

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

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

PHP

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

Q&A

解決済

1回答

2768閲覧

Laravel app.cssに追記

nakatai

総合スコア3

Laravel

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

PHP

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

0グッド

0クリップ

投稿2021/02/10 02:09

編集2021/02/11 07:33

app.cssに追記したい。dashboard.cssをresources/css/dashboard.cssと配置。
npm run dev でapp.cssにdashboard.cssの内容が追記されたが、検証してもdisplay: none;が効いていない。

php

1コード 2 <!-- パソコンなど --> 3 <li style="align-self: center;" class="mr-3"> 4 <form action="{{ route('top') }}" method="get" class="pc-header"> 5 <div class="form-group d-flex mb-0"> 6 <select name="category"> 7 <option value="">全て</option> 8 @foreach ($categories as $category) 9 <option value="primary:{{ $category->id }}" {{ $defaults['category'] == 'primary:' . $category->id ? 'selected' : '' }}>{{ $category->name }}</option> 10 @foreach ($category->secondaryCategories as $secondary) 11 <option value="secondary:{{ $secondary->id }}" {{ $defaults['category'] == 'secondary:' . $secondary->id ? 'selected' : '' }}>  {{ $secondary->name }}</option> 12 @endforeach 13 @endforeach 14 </select> 15 <input type="text" name="keyword" value="{{ $defaults['keyword'] ? $defaults['keyword'] : '' }}" class="form-control" aria-label="Text input with dropdown button" placeholder="キーワード検索"> 16 <div class="input-group-append"> 17 <button class="btn btn-outline-dark"><i class="fas fa-search"></i></button> 18 </div> 19 </div> 20 </form> 21 </li> 22 23 <!-- スマホ --> 24 <li style="align-self: center;" class="mr-3"> 25 <form action="{{ route('top') }}" method="get" class="mobile-header"> 26 <div class="form-group d-flex mb-0"> 27 <select name="category"> 28 <option value="">全て</option> 29 @foreach ($categories as $category) 30 <option value="primary:{{ $category->id }}" {{ $defaults['category'] == 'primary:' . $category->id ? 'selected' : '' }}>{{ $category->name }}</option> 31 @foreach ($category->secondaryCategories as $secondary) 32 <option value="secondary:{{ $secondary->id }}" {{ $defaults['category'] == 'secondary:' . $secondary->id ? 'selected' : '' }}>  {{ $secondary->name }}</option> 33 @endforeach 34 @endforeach 35 </select> 36 <input type="text" name="keyword" value="{{ $defaults['keyword'] ? $defaults['keyword'] : '' }}" class="form-control" aria-label="Text input with dropdown button" placeholder="キーワード検索"> 37 <div class="input-group-append"> 38 <button class="btn btn-outline-dark"><i class="fas fa-search"></i></button> 39 </div> 40 </div> 41 </form> 42 </li>

CSS

1 2pubic/css/app.css 3 4コード 5/* スマホ */ 6@media screen and (max-width: 767px) { 7 .pc-header { 8 display: none !important; 9 } 10} 11 12/* パソコン */ 13@media screen and (min-width: 768px) { 14 .mobile-header { 15 display: none !important; 16 } 17}

SCSS

1 2resources/sass/app.scss 3 4コード 5// CSS 6@import '../css/dashboard.css';

css

1 2resources/css/dashboard.css 3 4コード 5@media screen and (max-width: 767px) { 6 .pc-header { 7 display: none !important; 8 } 9} 10 11/* パソコン */ 12@media screen and (min-width: 768px) { 13 .mobile-header { 14 display: none !important; 15 } 16}@charset "UTF-8";

PHP

1 2<!doctype html> 3<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <!-- CSRF Token --> 9 <meta name="csrf-token" content="{{ csrf_token() }}"> 10 11 <title>@yield('title')</title> 12 13 <!-- Scripts --> 14 <script src="{{ asset('js/app.js') }}" defer></script> 15 16 <!-- Fonts --> 17 <link rel="dns-prefetch" href="//fonts.gstatic.com"> 18 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> 19 20 <!-- Styles --> 21 <!--ここでCSSを読み込んでいる--> 22 <link href="{{ asset('css/app.css') }}" rel="stylesheet"> 23</head> 24<body> 25<div id="app"> 26 <x-header></x-header> 27 <main> 28 @yield('content') 29 </main> 30</div> 31</body> 32</html> 33 34コード

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

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

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

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

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

m.ts10806

2021/02/10 02:15

SCSSのコンパイルとデプロイはされたのですか?
nakatai

2021/02/10 02:56

すいませんまだ初心者なもので、コンパイルとデプロイの意味はわかるのですが、具体的にSCSSのコンパイルとデプロイについて教えていただけるとありがたいです。
m.ts10806

2021/02/10 03:03

ん、知らずに使ってたというわけですか? それだとこの場でおさまる範囲ではないので入門系の記事を一通り読んできてください。
Lulucom

2021/02/10 09:14

> app.cssにdashboard.cssの内容が追記されたが このapp.cssってpublic/css/app.cssのことでしょうか。 また、public/css/app.cssを読み込んでいる箇所の掲載もお願いします。 説明に出てくる各ファイルや、掲載された各コードについて、パスも含めた正確なファイル名を書いていただくとわかりやすくなると思います。(ここではなく、ご質問に追記をお願いします)
Lulucom

2021/02/11 06:38

ファイル名が追記されてわかりやすくなりました。 > また、public/css/app.cssを読み込んでいる箇所の掲載もお願いします。 この点はいかがでしょうか。
guest

回答1

0

ベストアンサー

バージョン付け/キャッシュ対策をするとどうでしょうか。

  • webpack.mix.jsでversion()を使う
  • public/css/app.css等を読み込むときにasset()の代わりにmix()を使う

参考: Laravel 8.x アセットのコンパイル(Mix) バージョン付け/キャッシュ対策

投稿2021/02/11 07:49

Lulucom

総合スコア1899

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

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

nakatai

2021/02/12 10:59

色々検討してみたらできました!!公式ドキュメントをしっかり読んで理解したいと思います!
Lulucom

2021/02/12 11:15

回答の内容で解決されたということでしょうか?解決されたようでよかったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問