英文:
Preserve file names in dev mode
问题
在使用 Vite 的开发模式下，CSS 样式通常是通过 <style> 标签注入到 HTML 文件中的，而导入的 CSS 文件的文件名通常不会被保留。是否有一种方法可以保留文件名和行号呢？（与 webpack 示例相同）
在 webpack 中，你可以获取到应用样式的文件名和行号：
而在 Vite 中，你可以看到使用 <style> 而不是文件名：行号：
英文:
In development mode with Vite, the CSS styles are typically injected into the HTML file using a <style> tag, and the file names of the imported CSS files are not preserved. Is there a way to preserve the file names and line? (same as webpack example)
In webpack you have the file name and the line of the style applied:
In vite you have <style> instead of name:line:
答案1
得分: 1
经过数小时的研究，我发现你可以通过在你的 vite.config.js 中将 css.devSourcemap 设置为 true 来达到与 webpack 设置相同结果。
例如：
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
// 所有的配置
css: {
devSourcemap: true,
},
});
英文:
After hours of research I find out that you can reach same result as webpack setting css.devSourcemap to true in your vite.config.js.
e.g.
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
// all your config
css: {
devSourcemap: true,
},
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论