How to find css files in Laravel 8

Question

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

Bennett · Accepted Answer · 2021-11-01 13:27:26Z

2

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

edited Nov 1, 2021 at 13:27

answered Nov 1, 2021 at 13:21

Bennett

7681 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

O'Niel Over a year ago

Adding it to webpack.mix.js and rerunning npm run dev works indeed. Is there a way to include all the CSS-files from a specific directory? Like *.css?

Bennett Over a year ago

You can copy multiple files. See laravel-mix.com/docs/6.0/copying-files

Mhamad Abu AlGhanam · Accepted Answer · 2021-11-01 14:28:34Z

0

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

answered Nov 1, 2021 at 14:28

Mhamad Abu AlGhanam

236 bronze badges

Collectives™ on Stack Overflow

How to find css files in Laravel 8

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related