Laravel app.cssに追記

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コード

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を読み込んでいる箇所の掲載もお願いします。この点はいかがでしょうか。