How I can enable hash for css and js files, compiled by laravel mix?
Example I need do:
<link href="{{ asset('css/app.css') }}?hash=3234234" rel="stylesheet">
For clear cache, when file is changed. How I can do it?
Using versioning with your static asset you have to use mix() it will do the versioning automatically for you.
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
And while mixing use .version() too.
mix.js('resources/assets/js/app.js', 'public/js')
.version();
From the Docs
If you won't know the exact file name. So, you should use Laravel's global mix function within your views to load the appropriately hashed asset. The mix function will automatically determine the current name of the hashed file
Related
I am using Laravel, in my layout blade template file (used by all my views) I have the following code to generate my stylesheet URL:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
When the page is generated this appears like this: http://myapp.test/css/app.css which looks like its correct, I have a file in the following directory \resources\css\app.css.
When I try and access the css file directly via the URL, laravel throws a 404 error, can someoen tell me what I'm doing wrong?
If you aren't using mix.css or tailwind or anything, and are writing your own css, put it in /public/css/app.css
When you use {{ asset('css/app.css') }} , laravel points to public/app.css.
Browser can only access contents of inside public folder.
Laravel uses webpack which complies css file located inside resources/css and saves into public/css.
If you look inside webpack.mix.js located in root folder of your project you can see following:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
So, if you access http://myapp.test/css/app.css , you should get css located in your public folder. you can confirm this from source tab of your browser's developer tools (i.e. page inspect).
I need to install Slim Cropper in Laravel (https://pqina.nl/slim/). I downloaded it and I have two files: slim.jquery.min and slim.min.css. How can I install it? I think I need to use the webpack.min.js, but I dont know how to use it. Thanks!
Well thats depends how you want do it. the quickest way could be simply, Add them to resources/layouts/app.blade.php in <head>. (assuming app.blade.php is your main layout file which you extending in all child views.) and use it like you would be using in normal html. Nothing Fancy. and for urls you can always use
<!-- Styles -->
<link href="{{ asset('css/slim.min.css') }}" rel="stylesheet">
<!-- script -->
<script src="{{ asset('js/slim.jquery.min.js') }}"></script>
which should load them from public/css and public/js folders.
read more about asset function here
https://laravel.com/docs/7.x/helpers#method-asset
I tried lot of ways to fix this problem from stackoverflow, laracast, google but nothing works,
-> I think my vue.js is not loading or working(Im using sublime text, all files showing highlighted or colored text except ExampleCmponent.vue file), npm run watch successfully but vue devtools also not deteceting any vue.
-> I also tried:
<div id="app">
<example-component></example-component>
</div>
Im sharing screenshots with you please help me out if possible:
ExampleComponent.vue
home.blade: i also tried without #id tag->
chrome:vue devtools:
here is app.js:
I tried:
Laravel 5 VueJS not working
https://laracasts.com/discuss/channels/vue/example-component-not-working
https://laravel.com/docs/7.x/frontend
What you have done here is called Fronend-Scaffolding. You still need to Compile Assets.
Open your webpack.mix.js and add your .js & .scss files. Once done, confirm files are in public /js /css folder.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Then, add below lines in your blade.
// use mix() for cache bursting. Or simply stick with asset()
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>
I have compiled my assets with Laravel mix. In blade file, the traditional way is
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
Favicon also works:
<link rel="icon" type="image/png" sizes="16x16" href="{{ mix('/favicon/favicon-16x16.png') }}">
What am I trying to do is, utilising mix() helper inside javascript, so that in my javascript I can access the cached asset path.
So in my component, I can do:
<img :src="mix_path('/img/hello.svg')" />
Is there a way to achieve that?
What comes to my mind is creating a global mixin and use that method in my read my mix-manifest.json and put the version id.
Edit: Use window object answer. That's sounds fine (as a workaround) as long as you don't use SSR as window object is not defined.
Maybe is there a way to write a javascript helper method to access the manifest.json to get the versioned path? Is it possible?
Update: This is how I solved it:
How to read mix-manifest.json from javascript
To pass PHP variables to the javascript will require you echo them to the page when it is loaded within a PHP file (i.e. a Blade template).
If you want to use them in pure javascript files, you could do something as simple as assigning them to properties of the window object
I have installed a Laravel 5.2 to run an existing project from my group mates but in my laptop, the project will only read inline CSS, it cannot read Linked CSS, What seems to be the problem?
you should use helper
url('path/to/css/file/in/public/folder')
First, put your assets in the public folder
Then you can use:
<link href="{{ url('path/file.css')}}" rel="stylesheet" type="text/css" />