Versioning combined CSS files in Laravel 5.4 with Laravel Mix

Question

I am using Laravel Mix in Laravel 5.4 and I would like to combine to plain files and add versioning.

Reading the documentation it says

The version method will automatically append a unique hash to the filenames of all compiled files, allowing for more convenient cache busting

And it efectively does what it says. But is there any workaround to obtain a final combined file with versioning?

Actually I would like to join some compiled files together with other plain files and combine everything in a single versioned file.

Edit:

The code I am using is like the following

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .combine(['public/css/app.css', 'other/component/file.css'], 'public/css/all.css')
   .version();

And I would like to obtain a versioned all.css file. i.e. something like all.d41d8cd98f00b204e9800998ecf8427e.css.

However what I get is a versioned version of the app.css and a non-versioned version of the all.css.

Can you show the code you have so far and an example of your desired output? — Rwd
– Rwd, Commented Feb 13, 2017 at 18:30
Try updating laravel-mix to at least 0.7.4. github.com/JeffreyWay/laravel-mix/issues/352 — Rwd
– Rwd, Commented Feb 14, 2017 at 7:56
Upgrading doesn't help. It looks like the funcionality i am looking for is not available. — mosh442
– mosh442, Commented May 2, 2017 at 23:29

Petr Slobodyanyuk · Accepted Answer · 2020-09-01 17:23:32Z

2

https://laravel-mix.com/docs/5.0/versioning

In webpack.mix.js:

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.sass', 'public/css')
   .version();

answered Sep 1, 2020 at 17:23

Petr Slobodyanyuk

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darren Murphy · Accepted Answer · 2019-11-19 13:27:34Z

Versioning/Cache-Busting for CSS and JS files

Webpack.Mix

After combining my css (using mix.styles) and js (using mix.scripts) files into two files, I had all.css and all.js.

To add versioning, I did the following:

var timestamp = Date.now();
mix.copy('public/css/all.css', 'public/css/all/all.'+ timestamp + '.css');
mix.copy('public/js/all.js', 'public/js/all/all.'+ timestamp + '.js');

OR

Write it directly when you combine your css and js files, for example:

mix.styles([
    'public/css/app.css',
    'public/css/custom.css'], 'public/css/all/all.'+ Date.now() + '.css').

mix.scripts([
    'public/js/app.js',
    'public/js/custom.js'], 'public/js/all/all.'+ Date.now() + '.js').

Blade layout file:

I created /css/all/ and /js/all/ directories. I used the scandir() php function with ordering to get all of the files in the respective directories. Then I got the first filename from the array, which in this instance was 'all.1574160664960.css'.

@php($css_files = scandir('css/all/', 1))
<link href="/css/all/{{ $css_files[0] }}" rel="stylesheet">

@php($js_files = scandir('js/all/', 1))
<script src="/js/all/{{ $js_files[0] }}"></script>

Collectives™ on Stack Overflow

Versioning combined CSS files in Laravel 5.4 with Laravel Mix

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related