How to find css files in Laravel 8-CodePudding

The picture beneath shows my Laravel project structure.

In my file head.blade.php I have tried the following things to include resources/css/general.css:

#1
<link rel="stylesheet" type="text/css" href="{{ asset('css/general.css') }}">
#2
<link rel="stylesheet" type="text/css" href="{{ asset('/css/general.css') }}">
#3
<link rel="stylesheet" type="text/css" href="{{ asset('/resources/css/general.css') }}">
#4
<link rel="stylesheet" type="text/css" href="{{ asset('resources/css/general.css') }}">

None of the four options work, the CSS file does not get found. However, <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}"> Does get found for some reason... Why does app.css gets found but general.css not while they're in the same folder?

The following commands:

npm install
npm run dev

returns the following:


> dev
> npm run development


> development
> mix


● Mix █████████████████████████ sealing (87%)
 code generation




● Mix █████████████████████████ done (99%) plugins
 WebpackBar:done







✔ Mix
  Compiled successfully in 613.02ms



   Laravel Mix v6.0.37


✔ Compiled Successfully in 593ms
┌────────────────────────────────────────────────────────────────────┬─────────┐
│                                                               File │ Size    │
├────────────────────────────────────────────────────────────────────┼─────────┤
│                                                         /js/app.js │ 606 KiB │
│                                                        css/app.css │ 1 bytes │
└────────────────────────────────────────────────────────────────────┴─────────┘
webpack compiled successfully

CodePudding user response：

asset() is used to reference files in the public directory. Typically you would copy / do some processing in your webpack.mix.js file to get the files over to the public directory.

Ex in webpack.mix.js:

mix.postCss("resources/css/example.css", "public/css/example.css");

Copies the example.css file to the public directory as example.css (once you run npm)

Then in your blade you could reference like: asset('css/example.css')

CodePudding user response：

move the CSS file location to Public file if u want to use asset()