如果我们采用诸如webpack或vite的构建工具开发项目，一定对sourcemap这个单词比较熟悉。sourcemap即

源代码映射，开启后，即使在开发环境也可以映射出源代码的位置。

在vite项目中，css也有与之类似的属性devSourcemap。

devSourcemap

vite对css内容的特殊处理

官网对devSourcemap的解释非常简单：

我们通过几个简单示例来看看这个属性值的含义。

我们在一个基于vite的vue项目中，随便写一点简单样式，不做任何配置

// app.vue
<template>
  <div class="wrap">这是一个vue3的demo，基于vite构建</div>
</template>
<style scoped lang="less">
.wrap{
  background: burlywood;
  border-radius: 5px;
  width: 400px;
  height: 80px;
  color: #fff;
  font-size: 24px;
  line-height: 80px;
}
</style>

我们打开浏览器，定位一下元素的样式

通过上图，我们可以看出，vite将app.vue的内样式内容进行了处理，以style标签的形式全局注入到了html里。因此，我们通过浏览器定位div元素的.wrap样式时，指向的是head标签内的style标签。

然而，开发过程中，我们更希望能通过类名直接定位到是哪个文件内的样式，这样更利于我们调试。

这时，devSourcemap属性就派上用场了。

devSourcemap的用途

我们在vite.congfig.js内配置devSourcemap为true

注：devSourcemap是css配置项的一个属性

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    // 预处理器配置项
    // preprocessorOptions: {// ..... },
    devSourcemap:true
  },
});

然后，我们在打开浏览器定位下这个样式内容看看

很明显，这次我们直接定位到了App.vue的源码中，非常舒服，开发必备啊！

Vite中如何devSourcemap

首先，我们要明确的一点是，这个配置在生产环境（代码打包后）是无效的。

我们配置此项，将代码进行部署，然后定位样式文件看看

可以发现，在生产模式，所有样式被放到了index[哈希值].css的文件内。因此，这个配置在生产模式是无效的。

那么，我们在vite中配置时，默认将其开启就行，反正生产模式也是不生效的。

当然，如果你想更专业一波，可以这么配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig(({ command, mode, ssrBuild }) =>{
  plugins: [vue()],
  css: {
    // 开发模式为true，生产模式为flase
    devSourcemap:command === 'serve'
  },
});

可能有些同学觉得这里的配置方法比较奇怪，没关系，参考这篇文章：

https://juejin.cn/post/7172009616967942175