Vite开发模式下如何保留CSS文件名及行号（对标Webpack）

当然可以实现，只需通过Vite的内置配置开启CSS Source Map即可，具体操作如下：

• 打开项目根目录下的vite.config.js（或vite.config.ts）配置文件
• 添加css.devSourcemap配置项并设为true，示例代码：

export default {
  css: {
    devSourcemap: true
  }
}

重启Vite开发服务后，在浏览器开发者工具的Elements面板查看样式规则时，就能看到对应的源文件名和行号，效果和Webpack一致。

补充说明：

• 该配置仅在开发模式生效，不会增加生产环境的打包体积
• 若使用Vue单文件组件，开启后会精准关联到.vue文件内的<style>代码块，定位更准确

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