处理 CSS / 图片 / TypeScript / JSX

本节目标

• 用 Vite 原生能力处理样式与 TS，无需额外 loader
• 理解 CSS 预处理（SCSS）与 CSS Modules
• 知道图片 import 返回的是 URL

Webpack 要配一堆 loader，Vite 则「默认就懂」大部分事情：

// src/main.js
import './style.css'          // ✅ 原生支持，Vite 自动注入
import { greet } from './util' // ✅ .ts 也能直接被 esbuild 转译

console.log(greet('Vite'))

// src/util.ts
export function greet(name: string): string {
  return 'Hello, ' + name
}

CSS 更进一步——CSS Modules 用 .module.css 文件名约定自动开启局部作用域：

/* src/button.module.css */
.btn { color: #3178c6; padding: 8px 16px; }

import styles from './button.module.css'
// styles.btn 是一个唯一的哈希类名，避免全局污染
document.querySelector('#app').innerHTML = `<button class="${styles.btn}">点我</button>`

需要 SCSS 只要装一个包：

# npm i -D sass

/* src/style.scss —— Vite 检测到 sass 会自动处理 */
$primary: #3178c6;
body { color: $primary; }

import './style.scss' // 直接 import 即可

图片/字体 import 返回 URL（见上节），HMR 对 CSS 是即时无刷新更新——改样式页面秒变，不用整页重载。JSX/TSX 也靠 esbuild 即时转译（配合框架插件，下节讲）。

名词解释

CSS Modules：一种「局部作用域 CSS」方案，类名被编译成唯一哈希，杜绝全局样式冲突。Vite 用 *.module.css 文件名约定自动开启。

SCSS（Sass）：CSS 的超集，支持变量、嵌套、mixin。Vite 检测到安装了 sass 就会自动编译 .scss/.sass。

esbuild 转译：Vite 用 esbuild 在「毫秒级」把 TS/TSX/JSX 转成 JS，无需像 babel 那样配一堆 preset。

HMR（热更新）：Vite 对 CSS 的 HMR 是「无刷新替换样式」，比 Webpack 的 style-loader 注入更丝滑。

课后练习

练习 1：为什么 Vite 处理 TS 不用像 Webpack 那样配 ts-loader？

答案：Vite 内置 esbuild，启动时就接管了 TS/JSX 的转译，开箱即用；Webpack 本身不懂 TS，必须靠 loader 扩展。Vite 的代价是 esbuild 不做「类型检查」（只转译），类型错误要靠 tsc --noEmit 单独跑。

练习 2：CSS Modules 的 styles.btn 在运行时是什么？

答案：一个字符串，是编译后的唯一类名（如 _btn_abc12）。把它作为 class 用，就能命中 CSS Modules 生成的局部样式，且不会和别处的 .btn 冲突。

总结

Vite 的「开箱即用」在资源处理上体现得最彻底：CSS 原生支持、TS/JSX 由 esbuild 即时转译、SCSS 装个包即可、图片 import 即 URL、CSS Modules 用文件名约定开启。你几乎不写构建配置就能覆盖 90% 的前端日常。唯一要记住的坑：esbuild 只转译不做类型检查，类型安全还得靠 tsc。下一节进插件机制——Vite 插件 = 兼容 Rollup 插件 + 几个 Vite 专属钩子。