Webpack: My style bindings are disappearing after production build

[esahione]

My style bindings are not working after I build the code for production (I'm using the Webpack skeleton initially generated by vue-cli).

The code is for a simple parallax component - you can find it here: https://gist.github.com/esahione/6a7dc75f1dec971c4c06

Here's my Webpack production config file: https://gist.github.com/esahione/c8d75d51ff7e59b10d5a
And here's the Webpack development configuration file: https://gist.github.com/esahione/c305121816040f849547

The code should be self explanatory. It works flawlessly on development, but when I try to build it for production it stops working. In fact, when I look at the code through the browser there is no style tag.

Is this a bug? How can I fix it?

[esahione]

So... I disabled the extract-text-webpack-plugin and now it's working.

[Astray-git]

I have the same issue if build on Debian (build config works fine on OSX and Windows).
May be related to #41 ?

[chrisvfritz]

Sounds like it is possibly related. @esahione @Astray-git I'd open an issue in extract-text-webpack-plugin detailing your issue. If you find a solution to your problem, please let us know back here!

[chrisvfritz]

I'm pretty convinced this is indeed the same issue as #41, so closing as duplicate for now.

[Astray-git]

Well, in my situation, the problem is not related to extract-text-webpack-plugin.

I find out the minifyCSS option for html-minifier will remove some :style biding code. (tested on Ubuntu 15.10)
‘minifyCSS' is set to true by default in vue-html-loader:
https://github.com/vuejs/vue-html-loader/blob/master/index.js#L78

[yyx990803]

@Astray-git what exactly is being removed? Example? Repro?

[Astray-git]

code:

<th
  :style="[
    column.styles,
    { width: column.width }
  ]">

build without minifyCSS:

<th :style="[\n            column.styles,\n            { width: column.width }\n          ]">

build with minifyCSS:

<th :style="">

[chrisvfritz]

@Astray-git I unfortunately wasn't able to reproduce the problem with that example. :confused: Could you link to an example project demonstrating the issue?

[Astray-git]

@chrisvfritz Try this hello.vue .
I can reproduce the bug in a fresh webpack-template project.

[chrisvfritz]

@Astray-git Thanks for the link! That helped a lot. :smiley: From the Vue docs:

The Array syntax for v-bind:style allows you to apply multiple style objects to the same element:

That means column.styles should be an object rather than a string. For example:

column: {
  width: '10px',
  styles: {
    textAlign: 'center'
  }
}

Is your issue resolved after making that change?

[Astray-git]

@chrisvfritz Sorry, that's a mistake in my test code.
with a correct style object, the style biding template is still built to :style=""

[yyx990803]

This seems like an html-minifier bug, but those options are not needed for Vue templates anyways. Fixed in [email protected].