Laravel. Where Should I put CSS files? - laravel

I put file name style.css in {Laravel_project}/public/css/
I included in blade file like this.
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}" >
and then checked its source on browser.
<link rel="stylesheet" type="text/css" href="http://localhost:8000/css/style.css" >
the file doesn't exist.
404
Not Found
Laravel version
$ php artisan --version
Laravel Framework 7.11.0

Related

Vite (in Laravel) cannot use with static assets from public directory

I have a problem when I update to laravel 9.19 (using vite instead of webpack).
In my project I using some static assets from public directory like <link rel="stylesheet" href="/css/assets/slick.css"> or <script src="/js/assets/slick.min.js"></script> and have 2 files to compile from resources like resources/sass/app.scss and 'resources/js/app.js', the same for .js files. On webpack I do something like this:
<link rel="stylesheet" href="{{ mix('/css/app.css') }}"><link rel="stylesheet" href="/css/assets/slick.css"> ... and
<link rel="stylesheet" href="{{ mix('/css/style.css') }}
the same situation for .js files and all works perfectlly. How I can do this with Vite
You can read the laravel docs, you should use the blade directive #vite() an use the project path:
#vite('resources/sass/app.scss')
#vite('resources/js/app.js')

Laravel 5.5 css path is not working under public directory

I have used the following to generate the CSS file:
<link rel="stylesheet" href="{{ asset('public/global/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
However, I see the css is not loading. From the view source, I see the below code which is not opening (404).
<link rel="stylesheet" href="http://127.0.0.1:8000/public/global/bower_components/bootstrap/dist/css/bootstrap.min.css">
But, if I remove the "public keyword" from the above path, its working.
I'm using php artisan serve in Ubuntu 16.04
<link rel="stylesheet" href="{{ public_path('global/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="http://127.0.0.1:8000/global/bower_components/bootstrap/dist/css/bootstrap.min.css">
these two works. Because when 127.0.0.1:8000 load, it starts making the project from public path.
and asset(/path) is represent asset folder. You must change this with public_path
You can use asset() helper,
<link href="{{ asset('public/global/bower_components/bootstrap/dist/css/bootstrap.min.css') }}" type="text/css" rel="stylesheet">

Why laravel can't find the css file?

I am using the following line to add the CSS file:
<link href="public/css/blog.css" rel="stylesheet">
And in source file I see it's showing:
<link href="public/css/blog.css" rel="stylesheet">
but somehow laravel can't find this CSS file!
Even I have used following line:
<link href="{{ URL::asset('public/css/blog.css') }}" rel="stylesheet" type="text/css" >
and in source file it's showing:
<link href="http://localhost:8000/public/css/blog.css" rel="stylesheet" type="text/css" >
But no luck!. it's saying:
Sorry, the page you are looking for could not be found.
You don't need to reference the public folder explicitely, because this is already the web root (at least it is when the web server is configured correctly, also for security reasons). In other words, the browser only sees the content of the public directory - everything else is pulled in by the framework.
This means <link href="css/blog.css" rel="stylesheet"> should be enough. Alternatively, you can also go for <link href="{{ asset('css/blog.css') }}" rel="stylesheet">.
Try without public in your link:
<link href="/css/blog.css" rel="stylesheet">
and also check that blog.css exists in the folder: public/css
Your webserver should use Laravel's public folder as root folder.

How to use fontawesome with vue.js

I was trying to use font-awesome with vue.js but couldn't got it running.
I tried including in the index but did not work:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Include in index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Now it should work

How do i call css file in laravel?

Good day. I'm trying to call css in laravel. Here is the css url
<link rel="stylesheet" href="http://localhost:84/mycms/public/css/index.css">
It's working fine.
Then I'm trying the laravel way with this https://stackoverflow.com/a/16565640/6354277 . And i change it to this
<link rel="stylesheet" href="{{ URL::asset(css/index.css') }}">
It Seems i can't found the css file. How can i fix it ?
You may try this.
My css file is in public/css/sample.css
It works fine
<link href="{{ asset('css/sample.css') }}" rel="stylesheet" >

Resources