​ vite对css的配置都是在vite.config.js的css字段里面。他下面有四个字段，下面我们一一介绍。

css.module

​ module字段主要是用于配置css模块化的行为，并且vite并不会拿着这个配置去做什么事情，我们在这里配置的东西，他会原封不动的交给postcss-modules，与其说在配置vite，不如说在配置postcss-modules。

  1. localsConvention：主要配置对导出的模块化的key的处理（类名是否驼峰）。他有四个值
    • camelCase：默认值，类名将被骆驼化，原始类名不会删除
    • camelCaseOnly：类名将被骆驼化，原始类名会删除
    • dashes：只有类名中的破折号会被驼峰化，原始类名不会删除。我们正常写样式，类名都是用-分隔，而不会用_进行分割，这也是规范，这里也会用到
    • dashesOnly：类名中的破折号将被驼峰化，原始类名会删除
  2. scopeBehaviour：主要用于配置模块化是全局还是局部，可以理解为是否开启模块化。默认是local，用了它之后，我们会发现模块化的css会携带一个hash，而我们就是依靠这个hash保证样式不会覆盖。
  3. generateScopedName：用来自定义模块化生成的类名。
  4. hashPrefix：如果需要最终生成的类名更加独特，可以考虑给这个属性一个字符串，最终他会参数到生成hash的过程中，使生成的hash更加独特。
  5. globalModulePaths：需要排除模块化过程的文件路径，如果我们需要某些样式不被模块化，可以在这里配置其路径。

css.preprocessorOptions

​ preprocessorOptions字段主要配置css预处理器的行为，比如说：我们正常情况下按照less，我们在编译less文件的时候会在命令行 lessc xxxx.less，有的时候还会给点参数。而我们使用vite开发的时候不需要自己手动编译文件，所以vite给我们提供了一些配置以便我们修改这些默认行为。整个配置对象的写法就是key+config的形式，key是预处理器的名字，config是一个对象，这个预处理器的行为。不同的预处理器可以配置不同的行为，下面以less为例

  1. math：配置less该在什么情况下进行数学运算。
  2. globalVars：我们可以在这个对象里面定义一些全局变量，避免在文件中频繁导入一些常用的css变量

css.devSourcemap

​ 我们运行的项目如果出现问题，你希望在浏览器看到的是编译过后的代码还是我们的源文件？显然是后者，如果你给我看编译后的文件，我怎么知道这个文件在哪里？我要一个个去找。所以如果给到我们源文件的位置，那么对于我们调试是有很大好处的。它的默认值是false，所以我们可以在开发的时候给他设置为true，这样我们在浏览器点击标签查看样式的时候，就能看到这个样式生效的具体文件位置。

css.postcss

​ postcss简单理解为一个插件系统，它既不是预处理器，也不是后处理器（很多人希望将他称为后处理器，但是postcss能做的事情绝对不是一个后处理器这么简单，我们下面也会简单讲讲为什么有人会将他称为后处理器）。我更愿意将他对标与babel，我们可以在这个系统里面做很多事情，比如说使用Autoprefixer插件给样式添加浏览器独有的前缀，来兼容更多的浏览器、或者使用PostCSS Preset Env插件来使用最新的css语法、自动补全等等。

​ 为什么有人会将postcss称为后处理器？我们前面讲到了，postcss可以做很多事情，我们现在举个开发中的例子 ：我们在项目中使用了比较新的css语法、嵌套语法，因为我们用到了postcss，所以我们不担心我们最终的代码浏览器不支持。所以我们写完代码，将代码丢给postcsss，postcss首先利用less把代码解析成普通的css，然后调用其他插件对css进行降级，然后返回结果。好，重点在调用less的过程，在早期，postcss并不需要用户去使用less对代码进行编译，他自己也有维护插件来处理这个事情，但是慢慢地发现，每当less、scss等插件更新了，他也要跟着更新，否者就无法识别less的最新语法，这个工作量是非常庞大的，而且是被动的。慢慢的，postcss就停止维护这些插件，转而交给less自己去处理，你先把你的less代码编译成css，然后我再帮你做其他事情，比如说添加浏览器前缀、语法降级等等。而调用less在先，使用postcss在后，所以就有人称postcss为后处理器