在 vite.config.js 中，可以通过 css 属性控制整个 vite 对 css 的处理行为。

// vite.config.js
import {defineConfig} from "vite";

export default defineConfig({
    css: { // 对 css 的行为进行配置
    }
});

css.modules

css.modules 官方文档

在 css.modules 中配置的 CSS modules 的行为，配置的选项将被传递给 postcss-modules。css.modules 中常见的配置项：

localsConvention

// vite.config.js
import {defineConfig} from "vite";

export default defineConfig({
    css: { // 对 css 的行为进行配置
        modules: { // 对 css 模块化的默认行为进行覆盖
            localsConvention: "camelCaseOnly"
        }
    }
});

localsConvention 配置生成 css 类名的格式。localsConvention 的可选值：

'camelCase'
'camelCaseOnly'：
'dashes'：以中划线分割单词
'dashesOnly'：
自定义的生成方法：

scopeBehaviour

scopeBehaviour 的可选值：

'global'：全局的
'local'：模块化的

generateScopedName

generateScopedName 生成类名的格式，可选值：

string：用字符串的方式定义类名个格式
自定义的生成方法：根据类名，文件名，css 内容生成自定义类名

hashPrefix

hashPrefix 配置的 hash 的前缀。

在生成 hash 时，会根据类名和一些其他的字符串（文件名+内部随机生成的一个字符串）去进行生成。如果配置了 hashPrefix，它将会参与到生成最终 hash 的过程中。如果你想生成的 hash 更加的独特，可以配置 hashPrefix。

globalModulePaths

globalModulePaths 设置不参与到 css 模块化的路径。使用场景：因为模块化会修改类名，在导入第三方的 css 然后进行修改的时候，不希望因为模块化导致类名被修改，可以在此处配置不参与 css 模块化的文件。

css.preprocessorOptions

官方文档

preprocessorOptions 指定传递给 CSS 预处理器的选项。文件扩展名用作选项的键。

less

下面介绍如果在 vite 的配置中设置传递给 less 预处理器的选项。查看本地是否安装了 lessc

npx lessc -v
# lessc 4.2.0 (Less Compiler) [JavaScript]

假设 index.module.less 文件中包含了下面的内容：

.content {
  .main {
    background-color: green;
    padding: (100px / 2);
    margin: 100px / 2;
  }
}

less 的 math 选项

使用 lessc 对上面的 less 文件进行编译

npx less index.module.less

输出如下，发现只有括号中的运算才会被执行

.content .main {          
  background-color: green;
  padding: 50px;          
  margin: 100px / 2;      
}

编译时加上 --math=always选项

npx less index.module.less --math=always

输出如下，发现非括号中的也被进行数学运算了

.content .main {
  background-color: green;
  padding: 50px;
  margin: 50px;
}

在 Vite 中，如果需要使用 --math=always选项，需要通过下面的配置：

import {defineConfig} from "vite";

export default defineConfig({
  css: { // 对 css 的行为进行配置
    preprocessorOptions: {
      less: {
        math: "always"
      }
    }
  }
});

less 的 globalVars 选项

less 中可以通过 globalVars 可以设置全局变量，避免在文件中频繁的导入全局的变量文件。下面是在 vite 中配置 less 中的全局变量

import {defineConfig} from "vite";

export default defineConfig({
  css: { // 对 css 的行为进行配置
    preprocessorOptions: {
      less: {
        globalVars: { // less 中的全局变量
          mainColor: "red"    
        }
      }
    }
  }
});

css.devSourcemap

在开发过程中是否启用 css 的 sourcemap。如果启用了，在开发过程中可以方便的定位到源文件。

参考

Vite世界指南（带你从0到1深入学习 vite）

vite 配置文件中的 css 配置