[Bug Report]: 修改代码后刷新浏览器修改后的内容会失效

[cordmaker]

Steps to reproduce

创建一个 vue3 项目，farm 使用最新正式版，安装 scss 插件，安装 ant-design-vue，在修改代码后，热更新会生效，页面上的内容被正确的替换。但如果刷新浏览器，有几率导致刚刚热更新的内容丢失，页面会恢复到热更新之前的效果。

我改的 .vue 文件中的 scss 代码，不确定修改 script 或 template 中的代码是否会出现该问题，因为这个问题也是不定时出现的。 不过我猜测只有修改 scss 时会有问题，因为 template 中刚添加的 class 类名还在，就是样式丢了。

下面是 farm.config.ts 中的配置：

import path from 'path'
import { defineConfig } from '@farmfe/core'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImportApi from 'unplugin-auto-import/vite'
import AutoImportComponents from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig(config => {
  return {
    compilation: {
      comments: false,
      lazyCompilation: false,
      sourcemap: config.mode === 'development' ? 'inline' : false,
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
        },
      },
      output: {
        assetsFilename: 'assets/[resourceName].[ext]',
        filename: 'assets/[resourceName].[ext]',
      },
      runtime: {
        isolate: true,
      },
    },

    plugins: ['@farmfe/plugin-sass'],

    vitePlugins: [
      vue(),
      vueJsx(),

      AutoImportApi({
        dts: './typings/auto-import-api.d.ts',
        resolvers: [AntDesignVueResolver()],
        imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
      }),

      AutoImportComponents({
        dts: './typings/auto-import-comps.d.ts',
        resolvers: [
          AntDesignVueResolver({
            importStyle: 'css-in-js',
          }),
        ],
      }),
    ],
  }
})

出现问题的 .vue 文件中的代码：

<script setup lang="ts">
import { NOT_FOUND_PAGE_NAME } from '@/constant'

defineOptions({
  name: NOT_FOUND_PAGE_NAME,
})
</script>

<template>
  <AResult
    class="result-comp"
    status="404"
    title="404"
    sub-title="抱歉，您访问的页面不存在或无权限访问"
  >
    <template #extra>
      <AButton type="primary" @click="$router.back">返回</AButton>
    </template>
  </AResult>
</template>

<style scoped lang="scss">
.result-comp {
  padding: 0; // 启动服务之前注释掉这一行，在服务启动之后解开注释，会发现页面正常显示，手动刷新浏览器后，该样式丢失
}
</style>

Reproduce link

No response

What is actually happening?

如上所述

System Info

"@farmfe/cli": "^1.0.4",
"@farmfe/core": "^1.3.29",
"@farmfe/plugin-sass": "^1.1.0",
"vue": "^3.5.12",
"ant-design-vue": "4.x",
"@ant-design/icons-vue": "^7.0.1",

[ErKeLost]

可以先试试 js的 sass 插件