Laravel-mix: no versioning for css files

[elastisteve]

webpack.mix.js:

mix.js('resources/assets/js/pages/main.js', 'public/js/main.js')
    .js('resources/assets/js/pages/account.js', 'public/js')
    .sass('resources/assets/sass/pages/main.scss', 'public/css')
    .sourceMaps()
    .combine([
        'resources/assets/uikit/css/uikit-edit.css',
        'resources/assets/uikit/css/components/upload.gradient.css',
        'resources/assets/uikit/css/components/sticky.gradient.css',
        'node_modules/sweetalert/dist/sweetalert.css',
        'resources/assets/css/animate.css',
        'resources/assets/css/app.css'
    ], 'public/css/all.css')
    .version();

public/css/all.css does not get versioned. Only .js and .sass

manifest:

{
  "/js/account.js": "/js/account.ea71c09548b7227cbe14.js",
  "/js/main.js": "/js/main.8876eb3f57f68f278c2c.js",
  "/css/main.css": "/css/main.3f8e8514365bea403da7.css"
}

on Win 10

[maengkom]

I have same experience using combine().version() it will not generate versioning. Solution, I have to save combine() to another resource/assets/generated/css/all.css then using that file to versioning and save to public folder.

[jclee100]

Just had this problem as well. Would be nice to add this feature.

[nathanbarrett]

+1

[r3k4]

+1

[adriaanzon]

This has been discussed before: #53, #154, #163.

Conclusion is that you can use mix.sass(), and import the css files in your sass entry point.

[elastisteve]

@adriaanzon thanks.

You said in one of the threads:

Using mix.sass for your css files directly seems to work too.

But when I do this:

mix.js('resources/assets/js/pages/main.js', 'public/js/main.js')
    .sass([
        'resources/assets/uikit/css/uikit-edit.css',
        'resources/assets/uikit/css/components/upload.gradient.css',
        'resources/assets/uikit/css/components/sticky.gradient.css',
        'node_modules/sweetalert/dist/sweetalert.css',
        'resources/assets/css/animate.css',
        'resources/assets/css/app.css'
    ], 'public/css/all.css')
    .version();

I get an error.

assert.js:85
  throw new assert.AssertionError({
  ^
AssertionError: mix.sass() is missing required parameter 1: src

[adriaanzon]

Yeah, you can't pass an array to mix.sass(), only one file. So you'd have to use one sass file that imports the css files, something like this:

// webpack.mix.js

mix.sass('resources/assets/sass/app.scss', 'public/css/all.css');

// resources/assets/sass/app.scss

@import "../uikit/css/uikit-edit.css";
@import "../uikit/css/components/upload.gradient.css";
@import "node_modules/sweetalert/dist/sweetalert.css";
// etc.

[adriaanzon]

Looks like you're not the only one: #228

[elastisteve]

@adriaanzon Superb! Of course! Why not import all the css in the app.scss! Very nice. (I deleted the loop comment 2 minutes after I posted it. Yes, I did see I actually created a loop!)

I think Taylor should add a little note to the docs, because this will trip people up over and over until they drive @JeffreyWay nuts with the same question, why combines are not versioned. haha

[JeffreyWay]

Yeah the thing to understand is that mix.copy() and mix.combine() are extras that aren't part of the Webpack compile process. Think of them as little hooks that get triggered once Webpack is done compiling. "When you finish compiling, combine these files."

They're not part of the core bundling process, so they won't be versioned. If they need to be, introduce the files into your mix.js() or mix.sass() calls.

[nejtr0n]

So, it's not compataible with elixir version on styles

        //Concat all scripts in one
        .scripts(
            modules
                .map(function(module) {
                    return module.paths.admin_js;
                })
                .filter(filter_assets)
            , 'public/js/admin/all.js')
        .version([
            'public/css/admin/all.css',
            'public/js/admin/all.js'
        ])

Please return elixr!

[elastisteve]

It's a different product. You can get it all done, but have to change your approach. You can still use Elixir if you like. I felt like you first, but now I prefer Mix (when it works - there were/are some issues on Windows).

[jonathanpmartins]

With mix.js() I get a different result then mix.combine(). Using mix.js Im also getting errors, because I think its trying to analyse and transpile it.

Think I will learn more about webpack and mix, so hopefully soon we all can get it done.

[JeffreyWay]

mix.js and mix.combine do different things, so it makes sense that you'll get a different result.

What error are you getting?

[Icesik]

Not sure I got well your issue, but I found this thread through my research for a similar problem, and the solution I've found may help someone.

The problem is that css files generated from sass compilation are versioned, so they have a different name from original, just use wildcard for styles() or combine() use.

.sass('resources/assets/sass/app.scss', 'public/css/app.css')
.styles([
        'public/css/app.*.css',
        ...
])
.version()
;

Hope it helps!