I have css under App/resources/css by default
when I open Login and Register page css is not loading. This is default css and js link on my app.blade.php
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
I did this
<link href="{{ URL::asset('assets/css/a.css') }}" rel="stylesheet">
and also tried
<script src="{{ asset('resources/js/app.js') }}" defer></script>
<link href="{{ asset('resources/css/app.css') }}" rel="stylesheet">
What shall I do to make it work.??
Move all your CSS and JavaScript to the public folder so that your structure becomes something like
public/
|--- css/
|---js/
Now to use your CSS and JavaScript from your new location do something like
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
This works because the asset() blade helper already looks from the public directory so you start your CSS and JavaScript URL construction from that point on
I would recommend to always use the mix helper in Blade like this
<script src="{{ mix('/js/app.js') }}"></script>
as it additionally properly takes care of versioned assets. Please make sure you either ran npm run dev or npm run prod (see Compiling assets) to generate the public/css/app.css and public/js/app.js files from the ones located in resources.
Related
when i load the page there's no error at all in the console. but then, when i saw the url of the css and javascript. it got asset path appended twice e.g
<link href="http://localhost:8080/css/all.css/css/app.css" rel="stylesheet">
<link href="http://localhost:8080/css/all.css/css/all.css" rel="stylesheet">
<script src="http://localhost:8080/css/all.css/js/app.js" type="text/javascipt" defer></script>
<script src="http://localhost:8080/css/all.css/js/script.js" type="text/javascipt" defer></script>
my .env file APP_URL is defined as http://localhost:8080
I linked the assets like this in my code
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/all.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}" type="text/javascipt" defer></script>
<script src="{{ asset('js/script.js') }}" type="text/javascipt" defer></script>
what's wrong with it ?
my js files are inside /public/assets/js
while my css files are inside /public/assets/css
is there anything that i should do to fix this duplicate path? because the css and js does not reflect at all
my webpack is like this
mix.js('resources/js/app.js', 'public/assets/js')
.sass('resources/sass/app.scss', 'public/assets/css');
mix.js('resources/js/script.js','public/assets/js');
mix.styles(['resources/css/main.css'],'public/assets/css/all.css');
So for laravel 6. here's how i solved my own issue. it seems like there's no need for the web pack for me, so in my application i placed all the js and css inside the public directory and included them like this in the code
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/all.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}" type="text/javascipt"></script>
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/script.js') }}"></script>
everything worked
Im working on a barcode or qrcode generator and I have a problem, when I integrate my code and asset folders in PHP everything works perfectly fine I can generate the code ! , but when I integrate this to Laravel and put all the links it went down tho it is the similar UI but the output of the program is not working well it is not generating the code.
My folders are placed in public in laravel and main folder only in php
I am currently confused of this problem - when I delete all assets, codes of JS files in PHP, why is it STILL working tho I deleted all the folders like fonts , css and js however in Laravel when I delete the currently said folders, it brings CHANGES tho in PHP everything works and run even tho the codes are deleted and folders are delete. any solution for this?? im wondering is there a setting for this?
P.S I didnt change any single code of them and still confused why it is not working properly in laravel
Is there any possibility to solve this problem?
my links in laravel
CSS & BOOTSTRAP
link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
JS
<script type="text/javascript" src="{{ asset('/js/filereader.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/qrcodelib.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/webcodecamjs.js') }}"></script>
<script type="text/javascript">
links in PHP
CSS
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
JS
<script type="text/javascript" src="js/filereader.js"></script>
<script type="text/javascript" src="js/qrcodelib.js"></script>
<script type="text/javascript" src="js/webcodecamjs.js"></script>
change your CSS/JS Directory Structure in Public folder.
CSS:
<link href="{{ asset('filepath') }}" rel="stylesheet" type="text/css" >
JS:
<script type="text/javascript" src="{{ URL::asset('filepath') }}"></script>
For CSS:
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" >
Make your directory structure is like this for CSS: /public/css/bootstrap.min.css and /public/css/style.css
For Javascript:
<script type="text/javascript" src="{{ URL::asset('js/filereader.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/qrcodelib.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/webcodecamjs.js') }}"></script>
Make your directory structure is like this for JS: /public/js/filereader.js and /public/js/qrcodelib.js and /public/js/webcodecamjs.js
I'm using Laravel 5.2.
I have public/app.css and i link it from views/layouts/app.blade.php with:
<link rel="stylesheet" href="{{ public_path('app.css') }}">
I have tried every combination that i can think of, like using asset() asset_path(), putting app.css in views/layouts/ with the app.blade.php file and nothing will work.
If I inspect the source of a page, it shows the link and the path is correct, but the styles won't apply.
Try this:
<link href="{!! asset('css/app.css') !!}" rel="stylesheet" type="text/css">
Try to use asset() method:
<link rel="stylesheet" href="{{ asset('app.css') }}">
i am using master pages in my application and all custom styling and bootstrap files are included there and its working fine but when i use wildcard for example localhost/final/User/id all bootstrap and custom styling links could not work, all files are in public folder
<!-- Bootstrap CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/portal-style.css" rel="stylesheet">
<link href="css/portal-stylesheet.css" rel="stylesheet">
this is screen shot for my view with wildcard
this is link for all files that is not working when i use any wildcard
You should use asset() helper to build links to CSS:
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
It'll work for you if you're keeping css files in public/css directory.
The reason this is happening is because of the way you have coded the path to the css file which is relative to the page you are viewing.
So when you view: localhost/final/user/id the browser is going to look for the css file here: localhost/final/user/css/bootstrap.css
Laravel has some helper methods to remove the pain of setting up your asset files (css, images, etc).
If you are using blade, you can use the asset() method like this:
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/portal-style.css') }}" rel="stylesheet">
<link href="{{ asset('css/portal-stylesheet.css') }}" rel="stylesheet">
Normally You can use asset() or secure_asset() for HTTPS, both will work when your assets, like css or js files are in public folder.
Or if you are not using public folder. Than url() will be there for you.
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
OR
<link href="{{ url('public/css/bootstrap.css') }}" rel="stylesheet">
This is kind of a stupid question, and I've looked around for similar answers and found some, however they are a bit more specific than what I am asking.
Say I want to include a custom styles.css or scripts.js file, would I just create a css/js folder in resources/views folder, and then call to them in my blade.php files like I would normally do in an HTML file when not using Laravel?
Example: <link type="text/css" rel="stylesheet" href="css/styles.css">
Or is there a different approach to this in Laravel?
Put your css files into the public folder like public/css/styles.css
Use the asset() function to add css, javascript or images into your blade template.
For Style Sheets
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" type="text/css" >
or
<link href="{{ URL::asset('css/styles.css') }}" rel="stylesheet" type="text/css" >
For Javascript
<script type="text/javascript" src="{{ asset('js/scripts.js') }}"></script>
or
<script type="text/javascript" src="{{ URL::asset('js/scripts.js') }}"></script>
You may also be interested to have a look at Laravel's Elixir to process your styles and javascript.
put your style.css file in inside css folder named: /css AND your js file inside js folder named: /jsput below code in your html file.
Your css files
<link rel="stylesheet" href="{{ URL::asset('css/yourstylesheet.css') }}" />
And js files
<script type="text/javascript" src="{{ URL::asset('js/jquery.min.js') }}"></script>