Could not load external CSS file, 404 Not Found

Level 104

Did you actually build your assets; resources\css\blog.css is not publicly accessible, only the public directory is?

Generally, we put uncompiled CSS/SASS/LESS (and JS) in the resources directory, then run a build step using Vite, laravel Mix etc. which writes a compiled assets to the public directory

Level 1

@tykus what do you mean by Build assets? I just created a css file inside the resources/css folder and pasted some css inside.

Level 104

@codexknight7 in that case, it seems that maybe you do not need a build process. Just create the file in a public/css directory instead. Then link it using

<link href="{{ asset('css/blog.css') }}" rel="stylesheet">

Level 1

@tykus Yes, just did it and now it works. But what is the best practice for this? To build , as you mentioned above?

Level 104

@codexknight7 it depends; keep it as simple as possible for as long as possible.

Level 104

@codexknight7 if your problem is solved, then please mark the thread closed.

kokoshneta

Best Answer

Level 27

@codexknight7 ‘Building’ your assets refers to the common practice of keeping two separate sets of CSS files (and JavaScript as well, but let’s focus on CSS here):

a human-readable version that you actually do your work in
the version that the browser actually downloads when you visit the website

The former of these is meant for development. It’s your files, meaning they’re usually nicely formatted with comments, proper indentation, good spacing, etc. They may also be written in a variant of CSS that requires preprocessing in order to be turned into regular CSS, such as SASS or LESS. And frequently, they’re made of component files, so you have separate CSS files for separate layers or components, rather than one humongous file to contain all your CSS. These files are stored in your resources folder (where your views also live) and are therefore not visible to the outside world.

The latter is meant for downloading. They’re the browser's files, optimised to be served as quickly and efficiently as possible in order to make the site load as quickly as possible, but not meant to be read by actual humans. That means they’re minified, with everything extraneous (comments, indentation, line breaks) removed. Any preprocessing required to turn SASS/LESS/other variants into standard CSS has been done here, and usually various extra CSS declarations are added for maximum browser compatibility. Often, all the different layer/component files are also combined into one big CSS file, so the browser only has to perform one HTTP request to get all the CSS at once. These files are stored in the public folder where the outside world has access to them (as required when a browser wants to fetch them).

The process of ‘building’ refers to having various different scripts run on your localhost and/or server to automatically turn the former type into the latter type. Laravel has some built-in scripts that do this: up until Laravel 8, it was Mix (created by Jeffrey Ways who also created Laracasts); since Laravel 9, it’s been Vite.

As @tykus says, if your CSS is simple and you don’t have any browser-compatibility issues, you don't need to worry about keeping two separate sets of files and building your assets at all – just write your CSS and put it directly in the public folder. If your CSS is only a few KB, it won't make any noticeable difference.

1 like

Sinnbeck

Level 102

You can format your code by adding ``` on the line before and after it

Level 1

@Sinnbeck Thank you. Do you have some guide for this forum, on how to use the code tags and text formatting in posts? Why there is no simple buttons in text editor?

nutkani1337

Level 1

@codexknight7 if you want to display code then you have to use ``` one line before and after the code. It will format your code automatically