Subscribe on changes!

About the loss of scoped CSS in production

avatar
Mar 8th 2023

Vue version

3.2.47

Link to minimal reproduction

https://github.com/mongofeng/vue-scoped-problem

Steps to reproduce

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve 
<template>
  <div class="index bg">
    <div class="px-6 pb-4 pt-10 bg-white">
      <div class="title pt-1">首页</div>
    </div>
    <div class="flex index-container min-h-180 rounded m-6 pb-6 relative h-full">
      <div class="left"><ModuleOpts ref="moduleOptsEl" /></div>
      <div class="right ml-6"><UserInfo @refresh="onRefresh" /></div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "homePage",
};
</script>
<script lang="ts" setup>
import UserInfo from "./user-info/user-info.vue";
import ModuleOpts from "./module-opts/module-opts.vue";
import { ref } from "vue";
const moduleOptsEl = ref<InstanceType<typeof ModuleOpts>>();

function onRefresh() {
  console.log(moduleOptsEl.value);
  
}
</script>

<style lang="scss" scoped>
.title {
  color: #000000d9;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
}

.index {
  .index-container {
    .left {
      flex: 1;
      height: 100%;
    }
    .right {
      width: 326px;
    }
  }
}
</style>

In the development environment, the same component dataId, css takes effect

image

Compiles and minifies for production


yarn build

What is expected?

Css takes effect in production environment

What is actually happening?

In the production environment, the same component dataId is different, and the css does not take effect image

image

System Info

System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Memory: 268.47 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.0 - ~/.nvm/versions/node/v14.18.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v14.18.0/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Safari: 14.1.2
  npmPackages:
    vue: ^3.0.0 => 3.2.47

Any additional comments?

No response

avatar
Mar 8th 2023

This may not be a bug of vue, because after I adjusted windicss(delete vue-cli-plugin-windicss and delete import 'windicss' ), it was normal, maybe this is a problem of vue-cli-plugin-windicss

avatar
Mar 8th 2023

also this is not a minimial reproduction