如何无需保存文件即可触发Vite HMR更新？

一、CSS即时热更新的几种实现方案 #

1. Vite（Vue生态首选，最简单） #

Vite天生自带热模块替换（HMR），对CSS的支持拉满：

• 初始化Vue项目：npm create vite@latest my-vue-app -- --template vue
• 启动开发服务：npm run dev
• 不管修改.vue单文件组件里的<style>代码，还是单独的.css文件，浏览器都会秒更，而且不会刷新整个页面，页面状态也能完整保留。

2. Webpack + 热更新配置 #

如果用Webpack构建项目，需要简单配置一下：

• 安装依赖：npm install style-loader css-loader webpack-dev-server --save-dev
• 修改webpack.config.js，添加CSS解析规则和热更新配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  devServer: {
    hot: true, // 开启热更新
    open: true // 自动打开浏览器
  }
};

• 启动开发服务：npx webpack serve，修改CSS后就能即时看到预览变化。

3. Parcel（零配置懒人方案） #

Parcel是零配置打包工具，天然支持热更新：

• 新建index.html和style.css文件，在HTML里引入CSS
• 全局安装Parcel：npm install -g parcel-bundler
• 启动服务：parcel index.html，修改CSS后预览会自动更新。

二、关于Stackblitz模式设置的保存位置 #

Stackblitz的模式切换（比如编辑器与预览的布局）是存在浏览器的LocalStorage里的。你可以按F12打开开发者工具，切换到Application面板，在LocalStorage中搜索stackblitz相关的键值对，就能找到对应的配置。不过这是站点自身的存储逻辑，本地开发环境不需要关注——本地的布局设置都是你使用的IDE（比如VS Code）的配置项。

内容的提问来源于stack exchange，提问作者pierpy