Vite中Stylus导入CSS文件路径错误问题求助

问题原因 #

Stylus 对带 .css 后缀的文件使用 @require 时，默认不会将文件内容编译进输出结果，而是生成原生 CSS 的 @import 语句。当你写 @require 'two.css' 时，生成的 @import url(two.css) 会让浏览器从网站根目录请求该文件，而非 src/stylesheet 目录，导致加载失败。

解决方法 #

方法一：使用相对路径导入 #

直接在 project.styl 中修改导入路径为相对路径，Stylus 会自动解析文件并将内容合并到编译后的代码中：

@require './one.styl'
@require './two.css'

方法二：用 @import inline 强制嵌入内容 #

使用 Stylus 的 inline 关键字，强制将 CSS 文件内容嵌入编译结果，避免生成外部导入语句：

@require 'one.styl'
@import inline 'two.css'

方法三：配置 Stylus 的解析路径 #

在 Vite 配置中添加 Stylus 的包含路径，让 Stylus 能自动找到 src/stylesheet 下的文件，无需修改导入语句：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      stylus: {
        includePaths: ['src/stylesheet']
      }
    }
  }
})

内容的提问来源于stack exchange，提问作者fabien-michel