Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

using v-bind in css will have a problem in production env #3921

Closed
huangxiaochang opened this issue Jun 9, 2021 · 11 comments
Closed

using v-bind in css will have a problem in production env #3921

huangxiaochang opened this issue Jun 9, 2021 · 11 comments

Comments

@huangxiaochang
Copy link

huangxiaochang commented Jun 9, 2021

Version

3.0.11

Reproduction link

https://github.com/huangxiaochang/vue-next-issue

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

Steps to reproduce

<template>
  <div class="home">
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Home',
  setup() {
    const homeHeight = ref('1000px')
    return {
      homeHeight
    }
  }
});
</script>

<style lang="scss" scoped>
.home {
  min-height: v-bind(homeHeight);
}
</style>

When I build the project, the css block is builded to :

.home[data-v-7347e058]{
   min-height:var(--109c9849)
}

And generating css var code is builded to:

Object(vue_runtime_esm_bundler["z" /* useCssVars */])(function (_ctx) {
    return {
      "fae5bece-homeHeight": _ctx.homeHeight
    };
  });

Because the var name '--109c9849' in css block is not in line with 'fae5bece-homeHeight' in js block,
So the min-height is Incorrect.

This may be a bug in Vue-loader, because it compile css block and script block with different env.(building css block with production, but development in js block).

What is expected?

css var name is consistent between css block and js block

What is actually happening?

it may be a bug in thread-loader used by vue-loader-v16


visiting https://huangxiaochang.github.io/vue-next-issue/ and clicking home route, inspecting the 'hello word', you can see it's dom style and css.

@huangxiaochang
Copy link
Author

huangxiaochang commented Jun 9, 2021 via email

@edison1105
Copy link
Member

I did a test, The same code with vite works fine.

@huangxiaochang
Copy link
Author

I did a test, The same code with vite works fine.

I am sorry, i forgot to submit the build tool.
I build the project with vue-cli4.5.12. and it have problem.
yes, it works fine with vite,

@edison1105
Copy link
Member

The root cause is:
loaderContext.mode is undefined in the reproduction project.
https://github.com/vuejs/vue-loader/blob/next/src/resolveScript.ts#L35

And
https://github.com/vuejs/vue-loader/blob/next/src/stylePostLoader.ts#L17
this.mode is production

so the generated name of cssVars is different.

but in the vue-loader code base, it also works fine.
a vue-cli bug ?

@huangxiaochang
Copy link
Author

The root cause is:
loaderContext.mode is undefined in the reproduction project.
https://github.com/vuejs/vue-loader/blob/next/src/resolveScript.ts#L35

And
https://github.com/vuejs/vue-loader/blob/next/src/stylePostLoader.ts#L17
this.mode is production

so the generated name of cssVars is different.

but in the vue-loader code base, it also works fine.
a vue-cli bug ?

Yes, the cause is:
loaderContext.mode is undefined when dealing with ts block in sfc.

It may also be considered a vue-cli bug.

But i think the root cause is thread-loader, which configured to dealing with ts or js in vue-cli default config.

If you remove thread-loader from ts or js rule, it works fine yet.

@yyx990803
Copy link
Member

Isn't this a bug of thread-loader causing loader context to lose mode then?

Either way this is not something that can be fixed in Vue core.

/cc @sodatea

@yyx990803
Copy link
Member

Fixed in vue-loader@16.3.1.

@yyx990803
Copy link
Member

FWIW this should still be considered a bug in thread-loader so I opened an issue there: webpack-contrib/thread-loader#123

@xinxinhe1810
Copy link

用的 webpack 5 、改成 vue-loader@16.3.1 ,没有用 thread-loader 生产环境还是有问题。

@huangxiaochang
Copy link
Author

用的 webpack 5 、改成 vue-loader@16.3.1 ,没有用 thread-loader 生产环境还是有问题。
Can you submit specific configuration of your project?

@hxgqh
Copy link

hxgqh commented Sep 28, 2022

vue 2.7 with vite in production mode also fails.

reproduction: https://github.com/hxgqh/vite_vue2.7

visit: http://localhost:28847/#/TestVbind

@github-actions github-actions bot locked and limited conversation to collaborators Sep 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants