vite 内置支持 css 预处理器和模块化：安装 sass 或 less 依赖后，直接使用 .scss/.less 文件即可；命名 xxx.module.css/scss/less 自动启用模块化，类名哈希隔离；可通过 vite.config.js 自定义 modules 行为及路径别名提升体验。
在 Vite 中配置 CSS 预处理器和模块化，不需要复杂插件或手动解析器——Vite 内置支持，只需安装对应依赖、按约定命名文件，就能开箱即用。
配置 Sass/Scss 或 Less 预处理器
Vite 本身不负责编译，但会自动调用已安装的预处理器（如 sass 或 less）完成编译。你只需要两步：
- 安装依赖：用 pnpm 推荐执行
pnpm add -D sass（Sass）或pnpm add -D less（Less） - 直接创建
.scss或.less文件并导入组件，无需修改vite.config.js - 变量、嵌套、混入等功能原生可用；例如
.scss中可写$color: #1890ff;，.less中写@color: #1890ff;
启用 CSS 模块（自动隔离类名）
CSS 模块默认按文件名识别，只要把样式文件命名为 xxx.module.css、xxx.module.scss 或 xxx.module.less，Vite 就自动启用模块化。
- 导入后得到一个对象，如
import styles from './Button.module.scss'，其中styles.container对应.container类 - 类名会被自动哈希化（如
Button_container_abc123），避免跨组件污染 - 需要全局样式时，用
:global(.btn)包裹，该类不会被重命名
自定义 CSS 模块行为（可选）
如果默认规则不满足需求，可在 vite.config.js 的 css.modules 下调整：
-
generateScopedName控制类名格式，例如'[name]__[local]___[hash:base64:5]' -
scopeBehaviour设为'local'（默认）或'global'，影响:global的默认作用域 -
resources和additionalData可用于统一注入变量，比如所有.scss开头自动加@use "@/styles/vars" as *;
配合别名与路径优化（提升开发体验）
为方便引用公共样式，建议在 vite.config.js 中配置路径别名：
- 使用
fileURLToPath(new URL('./src', import.meta.url))获取安全路径，避免__dirname报错 - 设置
resolve.alias，例如'@styles': path.resolve(__dirname, 'src/styles') - 之后可在任何
.scss文件中直接写@import '@styles/mixins';
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
