About the loss of scoped CSS in production
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
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
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
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