Vite 静态资源与样式

真实项目里除了 JS，还有大量 CSS、图片、字体需要处理。Vite 对这些资源有非常省心的默认行为。这一篇我们系统过一遍。

CSS 的三种用法

第一种，直接 import。在 JS 里导入 CSS，Vite 会自动把它注入页面。

import './style.css'

第二种，CSS Modules，用于避免类名冲突。把文件命名为 xxx.module.css，导入时会得到一个映射对象。

/* style.module.css */
.title {
  color: red;
}

import styles from './style.module.css'

document.querySelector('#app').className = styles.title

这样 .title 会被编译成带哈希的唯一类名，不会污染全局。

第三种，PostCSS。Vite 内置支持 PostCSS，只要项目根目录有 postcss.config.js 或 package.json 里的 postcss 字段，Vite 就会自动应用。

// postcss.config.js
export default {
  plugins: {
    autoprefixer: {}
  }
}

使用 Sass 和 Less

想用 Sass 或 Less 这类预处理器，只要安装对应的编译器，Vite 开箱支持。

npm install -D sass

然后直接写 .scss 文件并导入即可：

import './style.scss'

不需要额外配置，Vite 检测到 .scss 后缀会自动调用 sass 编译。Less 同理，安装 less 后使用 .less 文件。

图片资源的三种处理方式

第一种，放到 public 目录。前面讲过，引用路径以 / 开头，文件原样拷贝，不带哈希，适合 favicon 这类固定路径资源。

第二种，作为模块导入。在 JS 里 import 图片，Vite 会处理它并返回最终 URL。

import logoUrl from './logo.png'

const img = document.createElement('img')
img.src = logoUrl

构建时这张图会被处理、重命名并输出，同时返回正确的访问地址。这种方式能享受哈希命名和缓存优化。

第三种，在 CSS 里引用。直接写 background: url('./bg.png')，Vite 同样会处理这张图。

.banner {
  background: url('./bg.png') no-repeat;
}

小资源自动内联

默认情况下，小于 4KB 的资源（图片、字体等）会被 Vite 转成 base64 内联进代码，减少请求数。超过阈值的则作为独立文件输出。你可以用 assetsInlineLimit 调整阈值：

export default defineConfig({
  assetsInlineLimit: 8192 // 8KB，单位字节
})

字体与特殊资源

字体文件的处理和图片一样，放到能被 import 的路径下，或放进 public。SVG 也可以 import，得到它的 URL。

环境变量与 .env 文件

Vite 用 .env 文件管理环境变量，规则如下。

• .env 所有环境都加载。
• .env.local 本地覆盖，不上传仓库（记得加进 .gitignore）。
• .env.[mode] 指定环境，比如 .env.production。

文件内容以 VITE_ 开头的变量才会暴露给客户端代码：

# .env
VITE_API_BASE = https://api.example.com

在代码里通过 import.meta.env 访问：

const base = import.meta.env.VITE_API_BASE
fetch(`${base}/users`)

非 VITE_ 前缀的变量只在 Node 端（配置文件里）可用，不会泄露到浏览器。这是安全和体积上的考量。

本篇小结

• CSS 可直引、可用 Modules、可走 PostCSS。
• 安装 sass/less 后即可用对应预处理语法，无需额外配置。
• 图片优先用 import 方式，享受哈希与缓存；固定资源放 public。
• 环境变量必须以 VITE_ 开头才能在前端访问。

下一篇我们进入生产环境构建，把项目打包上线。