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
Related
I want to compile only selected file based on usertype. I've different vue instance file in resource/js and I want to mix only one of them.Currently I'm doing this
#if(Auth::user())
<script defer src="{{ mix('js/app.js') }}">
#else
<script defer src="{{ mix('js/guestApp.js') }}">
#endif
But it takes path from public folder,instead of resources. How do I achieve it? Can I mix resources/js/app.js file from blade?
I've found the solution and it is to conditionally using of js file
#if(Auth::user())
<script src="{{ asset('js/app.js') }}" defer></script>
#else
<script src="{{ asset('js/guestApp.js') }}" defer></script>
#endif
And then using different Vue app for different user type-
"resources/js/Guest/app.js"
And in my webpack compiling all at once-
mix.js('resources/js/Guest/app.js', 'public/js/guestApp.js')
.js('resources/js/app.js', 'public/js/app.js')
.sass('resources/sass/app.scss', 'public/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 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.
I am new to Elixir and need help resolve error below. I am not clear how I can resolve?
"File app.js not defined in asset manifest"
I have in my Blade files the below two lines which are being pointed to as causing the error.
<link rel="stylesheet" href="{{ elixir('app.css') }}">
<script src="{{ elixir('app.js') }}"></script>
rev-manifest file is as below: It is in public/build/
{
"app.css": "css/app-scheduler-7b1b6567b7f6fa730140.css",
"app.js": "js/app-scheduler.js"
}`
Here is the gulp file `const elixir = require('laravel-elixir');
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js');
});
`
App.js is available in resources/assets/app.js
I have found these webconfig files? Is there anything I should try here
output: {
filename: 'js/[name]-scheduler.js',
path: path.join(__dirname, '/public/build'),
chunkFilename: 'js/[name]-scheduler.js',
publicPath: '/build/'
Your css is inside a path (/css).
<link rel="stylesheet" href="{{ elixir('css/app.css') }}">
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"