I just installed laravel 5.5 and the good news is, I finally managed to get npm run dev/production working. The manifest file looks fine too. In my bladeview I am using these lines:
#if($userIsLoggedIn)
<link href="{{ mix('build/ccs/admin.css') }}" rel="stylesheet">
#else
<link href="{{ mix('build/ccs/auth.css') }}" rel="stylesheet">
#endif
But loading the page results in the following error:
So I was like, lets go into the mix helper and dump some data to see what it looks like... :
dd($manifest, $path); gives :
Is it just me, or does the index actualy exists? using
dd($manifest[$path]);
actualy results in Undefined index. The weirdest thing, when I write the link outside of the conditional like this:
<link href="{{ mix('build/css/auth.css') }}" rel="stylesheet">
<!-- Styles -->
{{-- #if($userIsLoggedIn)
<link href="{{ mix('build/ccs/admin.css') }}" rel="stylesheet">
#else
<link href="{{ mix('build/ccs/auth.css') }}" rel="stylesheet">
#endif --}}
then if all works fine! no errors or undefined indexes whatsoever, versioning/non versioning.. all loads :P There is some stuff going on here that I don't understand.. Any1 has any ideas??
EDIT::
Using these lines at the bottom of the body works fine too..
#if($userIsLoggedIn)
<script src="{{ mix('/build/js/admin.js') }}"></script>
#endif
)) try to change way of css files)
mix('build/ccs/admin.css') => mix('build/css/admin.css')
etc.)
It should be 'build/css/admin.css' instead of build/ccs/admin.css.
Related
I have a Laravel 8 app running on Jetstream with Inertia Js and VueJs 3.
When I run: npm run prod
I receive this error:
Exception
Unable to locate Mix file: /css/app.css. (View: /var/www/html/mysite/resources/views/app.blade.php)
http://subdomain.mysite.com/
After changing:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
to
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
and:
<script src="{{ mix('js/app.js') }}" defer></script>
to
<script src="{{ asset('js/app.js') }}" defer></script>
It works well. But isn't this wrong? What is the advantage of using mix instead of asset?
I also tried using <link rel="stylesheet" href="{{ asset(mix('css/app.css')) }}"> but it's still not working. I receive the same error saying that mix is unable to locate the file: /css/app.css
This is a simple Laravel app, without any customizations.
I tried to run npm run prod with the hope that the page size will be smaller, but I see the same page size as for npm run watch or npm run dev (17Mb).
Any advice for reducing the page size for a VueJs Laravel app?
UPDATE
webpack.mix.js content:
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
tailwindcss('tailwind.config.js')
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
mix-manifest.json content:
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
}
Modify the following statements:
#vite(['resources/css/application.css', 'resources/js/application.js'])
For this:
Css: link rel="style sheet" href="{{ mix('css/app.css') }}"
JavasScript: src="{{ mix('js/app.js') }}" defer
In the app.blade.php and guest.blade files located in resources\views\layout
I have this route:
Route::get('/{language}/{housingType}/{housingUrl}', 'HousingInfoController#index');
example: http://localhost/project/public/es_ES/H/this-is-housing-url
Sometimes it can have a parameter like this one:
http://localhost/project/public/es_ES/H/this-is-housing-url?group=ESQ
then on my controller I check if this parameter exists:
$group = '';
if ($request->input('group')) {
$group = $request->input('group');
}
and send it to the view:
return view('pages.HousingInfo.index', ['group' => $group]);
on my HousingInfo view I do:
#section('group', $group)
also my HousingInfo view extends from a layout, that layout includes a head, its a file with title, description, meta tags and also the CSS's.
There I have a:
#yield('group')
so I can know which parameter was sent on the URL.
My problem is I can't use yield for IF statement to show one CSS or another based on that parameter, How can I achieve that?
This give me error:
#if(#yield('group') == 'ESQ')
<link rel="stylesheet" href="{{ asset('css/ESQ.css') }}">
#else
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
#endif
Try this.
#if (!empty($group))
<link rel="stylesheet" href="{{ asset("css/$group.css") }}">
#else
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
#endif
This will enable you to use multi css if your group variable is not empty, if it is then use app.css
I've been trying to set up owl carousel for quite some time now and none of the answers I read seemed to work. So, I began to wonder if it just simply won't work or am I missing something here.
I tried pretty much every possible solution I could find but did not get it to run...
I am using laravel app view with #yield('content') and on the home page I'm inserting the actual content along with the owl carousel.
In the blade.app file I linked all the scripts and css files like so:
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/jquery.min.js') }}" defer></script>
<script src="{{ asset('js/owl.carousel.min.js') }}" defer></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
autoPlay: 1000,
items:10,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:10
}
}
});
});
</script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.carousel.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.theme.default.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.theme.green.min.css') }}" rel="stylesheet">
When I load the page noting is showing up. I tried some other bootstrap carousels and they seem to work, but I like this one since it has draggable elements and looks cool...
Here is what it looks like in the editor:
app.blade.php page
carousel page
Delete the defer and try again by using correct link, may be sometimes the link has to be in incorrect form.
I have a .blade.php view that is nice and well designed with css, but when I put a variable like {{$data}} or even inside a for each loop {{$d->col1}} the css design get away.
What is the reason to be
#foreach($data as $d )
{{$d->price}}
#endforeach
I corrected myself
I changed
<link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
to
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
And the problem solved.
Wondering how can I link with blade syntax to my jquery/javascript files?
<script src="../../public/js/jquery.min.js"></script>
<script src="../../public/js/bootstrap.js"></script>
This didn't work:
<link type="text/css" rel="stylesheet" href="{{ URL::to('js/jquery.min.js') }}">
<link type="text/css" rel="stylesheet" href="{{ URL::to('js/bootstrap.js') }}">
URL::to($param) directs to your root folder (/public) and adds the string folders. URL::to('js/bootstrap.js') directs to /public/js/bootstrap.js. this looks correct to me.
although you used a css linking tag for javascript. try using:
<script src="{{ URL::to('js/jquery.min.js') }}"></script>
<script src="{{ URL::to('js/bootstrap.js') }}"></script>
You should use the following:
<script src="{{ URL::asset('/js/jquery.min.js') }}"><script/>
<script src="{{ URL::asset('/js/bootstrap.js') }}"><script/>
This will always work. If you are creating a package in workbench this is also the way to go.
And if you want to publish your assets to public you will do:
php artisan asset:publish --bench="vendor/package"