In Laravel, I’ve in public/css/app.css the following:
body { background: "red"; }
It’s linked to my layout like this:
<link rel="stylesheet" href="/css/app.css" media="screen" title="no title" charset="utf-8">
But when I go to the home page, the style isn’t applied to the body. I checked the source and the CSS file is there!
I removed the cache but nothing happened. This problem start after I added version() to elixir but after that I removed all the build folder, now I can’t get the style working.
When you use version() in elixir the filename changes. You can add following helper
<link rel="stylesheet" href="{{ elixir('css/app.css') }}">
this will always return the correct file name.
Refer to the documentation for versioning and cache busting.
Also make sure you run the gulp command again since you deleted the build folder.
I think you need to use asset to refer/link to files in public folder
<link rel="stylesheet" href="{{asset('/css/app.css')}}" media="screen" title="no title" charset="utf-8">
You should write this. This is Laravel predefined Function
{{ HTML::style('css/app.css'); }}
Related
I downloaded my laravel project from live serve (shared hosting) to local hosting because I want to make some changed in the code. I added a new index.php file to the public folder and run composer update and composer install commands and managed to run the project on local server (I use Laragon server on windwos). However, the project can not upload the resource. The resource are located in the public floder and linked using {{asset}} function and {{assetversion}} methods. Honestly, I do not know about the use of version. The code in like that
<link rel="stylesheet" href="{{ asset('public/frontend/infixlmstheme') }}/css/fontawesome.css{{assetVersion()}} ">
<link rel="stylesheet" href="{{asset('public/backend/css/themify-icons.css')}}{{assetVersion()}}"/>
<link rel="stylesheet" href="{{ asset('public/frontend/infixlmstheme') }}/css/flaticon.css{{assetVersion()}}">
<link rel="stylesheet" href="{{ asset('public/frontend/infixlmstheme') }}/css/nice-select.css{{assetVersion()}}">
<link rel="stylesheet" href="{{ asset('public/frontend/infixlmstheme') }}/css/notification.css{{assetVersion()}}">
<link rel="stylesheet" href="{{ asset('public/frontend/infixlmstheme/css/mega_menu.css') }}">
When I check the path in chrom dev tools, the link points to the right folder (except the version in not in the file name). such as
<link rel="stylesheet" href="http://127.0.0.1:8000/public/frontend/infixlmstheme/css/fontawesome.css?v=5.0.0 ">
and the folder in with same path starting from public.
However, the recourse is not connected and the error massage is shown in the attached image fro chrom dev tools.
I appreciate you help guys and thank you in advance for your time and expertise.
I have assempution the error is from {{assetversion}} but I could not find the version in the file name. I do not know a lot about the frontend how the asset version work.
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.
i am deploying my project to shared hosting now. But i found that all the css file seem like not in correct directory. For example my original code is <link href="{{ asset('intro/css/style.css') }}" rel="stylesheet" type="text/css">
In server i need to change it to
<link href="public/intro/css/style.css" rel="stylesheet" type="text/css"> in order to make it work.
But i having thousand of line need to change if i had to update all.
Is there others way to do it?
I am using Cpanel and my file is located in public_html.
Try this
<link href="{{URL:: asset('intro/css/style.css') }}" rel="stylesheet" type="text/css">
I'm a new in Laravel and am trying to use the mix.version() in the Gulpfile.js in Laravel 5.3 for cache busting.
this is my gulpfile.js:
elixir(function (mix){
mix.less('custom.less');
mix.version('public/css/custom.css');
});
When running gulp command in my terminal, my less is compiled and versioned correctly, but when I try to include the the following line my view file, it breaks my view:
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css) }}">
screenshot of my error
Is there a specific include or something I need to call in my view file to ensure the above line of code actually works? If I remove the above elixir line in my view code and hard code link my css file, then it works, but I can't leave it like that as I need versioning for cache busting.
Thanks so much, I have tried the documentation, but not examples exist of how to include the code in the view file.
There is a ' missing
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css) }}">
should be
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css') }}">
Regarding the question title
{{ elixir('/css/custom.css) }}
is causing the error not the mix.version()
I am using laravel and nodejs on WAMP Server on Windows 10. Now using the elixir mix function
elixir(function(mix) {
mix.sass('app.scss');
mix.version('css/app.css');
});
which is generating a version file for my app.css and placing it to
public\build\css\app-d37b3a9d94.css
now when I add the link of the css file by using elixir function, like following
<link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}">
it generates a path like
/build/css/app-d37b3a9d94.css
but with this, the css do not work on the resulted page. I troubleshoot the problem and found that it do not work due to the first slash in the path. when I manually add the above css file path (which elixir generated) by removing the first slash, it works. like the following
build/css/app-d37b3a9d94.css
I am not sure how to fix this problem where elixir generated path to css file work. Looks like elixir adding an extra slash before the path but I have checked the code on several places for laravel and the code works with first slash in path. Not sure why it is not working for me.
One more thing I have noticed, even if I remove mix.version('css/app.css'); from gulpfile.js (which generate version file) and run gulp command to update css/app.css, and use <link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}"> it still refer to the version file rather than referring to css/app.css Is it a correct behavior?
Try to use it this way:
<link rel="stylesheet" type="text/css" href="{{ asset(elixir('css/app.css')) }}">