Vite 中如何正确处理 CSS 的 @import 路径问题？

萌新.艺霖提问于 2026-03-02 21:36:19 阅读 4

工具

我在 Vite 项目里用 @import 引入本地 CSS 文件时，路径老是报错，明明文件存在却找不到。

比如我这样写：

@import './variables.css';
@import './mixins.css';

但控制台提示 Failed to resolve import "./variables.css"，是不是 Vite 对 CSS 里的相对路径处理方式不一样？试过加 ~ 和 @ 别名都不行。

Vite

我来解答赞 1 收藏

反馈

1 条解答

程序猿静静 Lv1

这个问题我之前踩过坑，Vite 对 CSS 里的 @import 处理确实有点特殊。

首先检查几个常见原因：

第一，确认你的 CSS 文件路径是相对于当前 CSS 文件本身的，不是相对于项目根目录。这个你应该没问题。

第二，Vite 默认情况下对 CSS @import 的解析比较严格。如果你在 vite.config.js 里配置了 alias，CSS 里直接用 @ 别名是认不出来的，需要特殊处理。

给你一个完整的配置方案：

import { defineConfig } from 'vite'

import path from 'path'



export default defineConfig({

  resolve: {

    alias: {

      '@': path.resolve(__dirname, 'src')

    }

  },

  css: {

    preprocessorOptions: {

      // 如果你用 scss/less 的话在这里配置

    }

  }

})

然后在 CSS 里用相对路径是最稳妥的，@import './variables.css'; 这种写法没问题。

如果还是报错，可能是这几个原因：

文件扩展名问题，Vite 有时候对 .css 扩展名的解析有 bug，试试在 import 语句里把扩展名写完整。

缓存问题，跑一下 npm run dev -- --force 强制清除缓存重新构建。

还有一个坑，检查一下你的 variables.css 和 mixins.css 文件本身有没有语法错误，有时候错误会向上传导，报错信息却指向 import 那一行。

注意安全方面，如果你在 CSS 里用了用户可控的变量或者动态路径，一定要做好校验，防止路径穿越攻击。虽然 CSS 本身风险有限，但养成好习惯没坏处。

把你项目的目录结构和完整的报错信息贴出来，我帮你定位具体问题。

2026-03-02 22:00