using v-bind in css block(SFC) have a promblem in production env

[huangxiaochang]

Version

16.1.2

Reproduction link

https://huangxiaochang.github.io/vue-loader-issue/

Steps to reproduce

my SFC is looked like:

hello word

<script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'Home', setup() { const containerHeight = ref('1000px') return { containerHeight } } }); </script> <style lang="scss"> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } .container { min-height: v-bind(containerHeight); } </style>

After building project, css block in SFC is builded to:

.container{
min-height: var(--00639f9a)
}

but js block is builded to:

var Appvue_type_script_lang_ts_injectCSSVars_ = function injectCSSVars() {
Object(vue_runtime_esm_bundler["r" /* useCssVars */])(function (_ctx) {
return {
"7ba5bd90-containerHeight": _ctx.containerHeight
};
});
};

Because css var name is inconsistent between css block and js block(--00639f9a and 7ba5bd90-containerHeight), so min-height of div.container is incorrent.

What is expected?

min-height of div.container should be 1000px what i set in setup.

What is actually happening?

when build css and JS block, the mode of webpack is different.
building css with 'production' but 'undefined' in js bolck.

---

vue version is: 3.1.1
thread-loader version: 2.1.3
webpack: 4.46.0

i think it may be affected by thread-loader used by vue-loader loader chain.

[AtLastDopamine]

我也是呢，项目要上线了，出现这个情况。我脑壳嗡嗡，在线坐等一位有缘人来救命。

[huangxiaochang]

It've fixed in vue-loader@16.3.1.

Detail : vuejs/core#3921