hmr scoped css style failed

Describe the bug

Using single-file components, style scoped css cannot respond to HTML during hot loading

Reproduction

eg：

// ...
// <h1 class="h" data-v-85b38074="">A</h1>

<style lang="less" scoped>
.h {
    background-color: #ccc;
}
</style>

upd

// ...
// <h1 class="h" data-v-85b38074="">A</h1>

<style lang="less" scoped>
.h {
-    background-color: #ccc;
+   background-color: red;
}
</style>

hmr result

[vite] hmr update /src/components/navigation/index.vue?vue&type=style&index=0&scoped=true&lang.less

<!-- updated -->
<style type="text/css">
.h[data-v-6fef89ea] {
  background-color: red;
}
</style>

However, after analysis, the css data-v-hashcode has changed because of scoped, but the html element attribute data-v-hashcode has not changed and the style is cleared. It can only take effect by refreshing the page or restarting vite.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 4.79 GB / 15.89 GB
  Binaries:
    Node: 14.9.0 - C:\Program Files\nodejs\node.EXE      
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD     
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD        
  Browsers:
    Chrome: 76.0.3809.87
    Edge: Spartan (44.19041.964.0), Chromium (90.0.818.66)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.1 => 1.2.2
    vite: ^2.3.3 => 2.3.4

Used package manager:

Logs

npx vite --debug

vite:config bundled config file loaded in 471ms +0ms
[dotenv][DEBUG] did not match key and value when parsing line 4: 
  vite:config using resolved config: {
  vite:config   base: '/',
  vite:config   resolve: {
  vite:config     dedupe: undefined,
  vite:config     alias: [
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object]
  vite:config     ]
  vite:config   },
  vite:config   css: { preprocessorOptions: { less: [Object] } },
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:style-import',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     include: [ 'lodash-es' ],
  vite:config     esbuildOptions: { keepNames: undefined }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: { compress: [Object] },
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: false,
  vite:config     chunkSizeWarningLimit: 1500,
  vite:config     watch: null
  vite:config   },
  vite:config   define: {
  vite:config     __APP__: {
  vite:config       name: 'park-vision',
  vite:config       version: '0.0.1',
  vite:config       description: 'vue3-vite',
  vite:config       author: [Object],
  vite:config       lastBuildTime: '2021-05-28 14:13:14'
  vite:config     },
  vite:config     __VUE_OPTIONS_API__: true,
  vite:config     __VUE_PROD_DEVTOOLS__: false
  vite:config   },
  vite:config   server: {
  vite:config     fsServe: { root: 'D:/vscode-workspace/SV-forecast-web', strict: false }
  vite:config   },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: 'D:/vscode-workspace/SV-forecast-web/vite.config.ts',
  vite:config   configFileDependencies: [ 'package.json', 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: { fsServe: [Object] }
  vite:config   },
  vite:config   root: 'D:/vscode-workspace/SV-forecast-web',
  vite:config   publicDir: 'D:\\vscode-workspace\\SV-forecast-web\\public',
  vite:config   cacheDir: 'D:\\vscode-workspace\\SV-forecast-web\\node_modules\\.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: true,
  vite:config   env: {
  vite:config     VITE_APP_TITLE: 'App (prod)',
  vite:config     VITE_APP_API_BASE_URL: '/api',
  vite:config     BASE_URL: '/',
  vite:config     MODE: 'development',
  vite:config     DEV: false,
  vite:config     PROD: true
  vite:config   },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +43ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  vite v2.3.4 dev server running at:

  > Local: http://localhost:3000/  
  > Network: use `--host` to expose

  ready in 918ms.

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[ifzm]

@underfin It does not come from the file, but the generated result

[github-actions[bot]]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.