devSourcemap

If we use construction tools such as webpack or vite to develop projects, we must be familiar with the word sourcemap . sourcemap is
the source code mapping. After it is turned on, the location of the source code can be mapped even in the development environment.

In the vite project, css also has a similar property devSourcemap .

Vite's special handling of css content

The official website's explanation of devSourcemap is very simple:

configuration name	attribute value	paraphrase
devSourcemap	boolean	default false

Let's take a look at the meaning of this attribute value through a few simple examples.

In a vite-based vue project, we just write some simple styles without any configuration

// 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>

Let's open the browser and locate the style of the element

From the figure above, we can see that vite has processed the internal style content of app.vue and injected it into html globally in the form of style tags . Therefore, when we locate the .wrap style of the div element through the browser, we point to the style tag inside the head tag.

However, during the development process, we prefer to be able to directly locate the style in which file through the class name, which is more conducive to our debugging.

At this time, the devSourcemap attribute comes in handy.

The purpose of devSourcemap

We configure devSourcemap to true in vite.congfig.js

Note: devSourcemap is an attribute of the css configuration item

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

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

Then, we open the browser and locate the content of this style to see

Obviously, this time we directly locate the source code of App.vue, which is very comfortable and necessary for development!

How to devSourcemap in Vite

First of all, we want to make it clear that this configuration is invalid in the production environment (after the code is packaged) .

Let's configure this, deploy the code, and then locate the style file to see

It can be found that in production mode, all styles are placed in the index[hash value].css file. Therefore, this configuration is invalid in production mode.

Then, when we configure it in vite, it will be enabled by default, and the production mode will not take effect anyway.

Of course, if you want to be more professional, you can configure it like this

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'
  },
});

Some students may think that the configuration method here is rather strange, it does not matter, refer to this article:

https://juejin.cn/post/7172009616967942175

Recommended related articles:

How to use CSS source file mapping in Vite

devSourcemap

Vite's special handling of css content

The purpose of devSourcemap

How to devSourcemap in Vite

Guess you like