I am very new to the laravel , i have done login blade file and i included css files but it's not loading css files ,can you please help me where did i mistake ..?
users.blade.php
<link rel="stylesheet" href="{{ asset('resources/css/user.css') }}">
You're trying to access the resources folder, which is not exposed to the public, you'll have to compile your css so it lives in the public folder, which is the folder that anyone(including your frontend) can access using https://your-url.tld/{public file path}. There are 2 ways in which you can have your user.css file available for to your frontend:
One:
You can import your user.css file to the existing resources/css/app.css file:
/* app.css file */
#import "../path/to/user.css";
Two:
You can compile user.css to a separate file, in case you want to use that file specifically on another layout or blade file instead of mixing it globally with the app.css file:
// webpack.mix.js file
mix.js('...')
.css('resources/css/user.css', 'public/css');
Then in your layout file:
// app.blade.php file
<link rel="stylesheet" href="{{ asset('css/user.css') }}">
Hope it helps.
Related
Could you tell me how to link css and js file in laravel according to my file structure
I wanna link app.css and app.js into museum.blade.php (inside portfolio)
I have try something like this: <link rel="stylesheet" href="{{ asset('resources/css/app.css')}}">, but it did not work
here is my file structure
please help me, thank you so much
I have try something like this: , but it did not work
This happens because resources folder are not to be consumed "public", the folder that would be consumed by "public" is a public folder, you need to compile them from resource to public first. Laravel has great documentation about it at Laravel Mix
To fix your problem, you need to find a file on your project directory called "webpack.mix.js"
and put this mix code on it.
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/museum.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
and then you can run npm run dev at your command line to compile the assets.
it will compile your targeted resources on webpack mix to public.
After that, on the head of your museum.blade.php, you can call it like
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>
I'm doing a little website for me with Laravel 8.0.
Inside home.blade.php, I have this : <link rel="stylesheet" href="{{ asset('css/header.css') }}">
But when I go to my browser, no css in my page. Inside the developper tools, it says <link rel="stylesheet" href="http://localhost/css/header_site.css">.
I have all my css inside the public/assets/css folder.
I also used the VirtualHost inside httpd-vhosts.conf where I do DocumentRoot "C:/xampp/htdocs/my-project/public".
Cordially
Try configuring the assets url in the .env file. ASSET_URL=http://localhost/assets/. Then do {{asset('css/header.css')}}
Route::get('fullDetail/{productId}','productController#showSingleProduct');
http://localhost/laravel-ecommerce1/fullDetail/233
file containing bootstrap files path change from
http://localhost/laravel-ecommerce1/bootstrap.min.css
to
http://localhost/laravel-ecommerce1/fullDetail/bootstrap.min.css
Add this in your blade template
<base href="/laravel-ecommerce1">
<link rel="stylesheet" href="/bootstrap.min.css">
the assets are linked relatively and the / means link from the root
I am building a blog for myself using Jekyll, however, when I open the page in my browser, the SCSS fails to load. I try to navigate to the SCSS file through my browser but to no avail, the browser believes that the SCSS does not exist.
Here is how I add the stylesheet to the HTML:
<link rel="stylesheet" type="style/css" href="/_sass/_base.scss">
I did this to all of my stylesheets, and yet the it doesn't work.
Does anyone know how to fix this problem? Thank you in advance.
You do not link to stylesheets with an href to "/_sass/_base.scss".
Instead you should do the following:
create another directory to hold your "stylesheet", say, css/.
then add an empty stylesheet with an empty front matter block (required)
---
---
// this is an empty stylesheet named "style.scss"
// use #import here to load partials from your _sass folder
import your partial(s) into the above "stylesheet".
---
---
// this is an empty stylesheet named "style.scss"
// use #import here to load partials from your _sass folder
#import "base";
#import "mixins";
link your HTML page with the stylesheet:
<link rel="stylesheet" type="style/css" href="{{ 'css/style.css' | relative_url }}">
...and done!
Takeaways:
Import files from your _sass into a "dedicated stylesheet".
The dedicated stylesheet must contain the front matter block (can be empty).
Link your HTML file with the dedicated stylesheet.
Linked file has a .css extension even if your source file was css/style.scss or css/style.sass
You may hard-code the markup or use a Liquid construct to link the stylesheet.
When using a Liquid construct, prefer using the relative_url filter instead of using {{ 'css/style.css' | prepend: site.baseurl }} or {{ site.baseurl }}/css/style.css
I get an Error Message with laravel 5, which I don't understand.
Next exception 'ErrorException' with message 'File build/css/all.css not
defined in asset manifest.
I haven't installed any asset pipeline or something. Just used elixir to compile, minify and version the scss-file to all.css and included it into the master view with <link rel="stylesheet" href="{{ elixir("css/all.css") }}">
What is this 'asset manifest' and how to fix this error?`
The question is of course what you want to achieve.
If you simply put all.css file into the public/css directory and you want to display this file, you can use:
<link rel="stylesheet" href="{{ asset('css/all.css') }}" />
However if you plan to modify this file and you don't want to have caching issues, you can put this all.css file again into public/css then put into gulpfile.js:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.version('public/css/all.css');
});
Now you'll need to run:
gulp
in your terminal, and now you can use
<link rel="stylesheet" href="{{ elixir('css/all.css') }}" />
as you previously did in your HTML.
It will create public/build/ folder with rev-manifest.json (this file is missing in your case).
I would recommend you to watch Managing assets Laracasts episode to understand it a bit better.
Same issue here!! I solve it by creating production version of css. I update gulefile.js as bellow,
elixir(function(mix) {
mix.sass('app.scss').version('css/app.css').browserify('app.js');
});
Then run following command which will create rev-manifest.json file in public/build directory.
gulp --production
Good luck!!