Vue项目中stylus报错绝大多数源于依赖版本不兼容，而非语法问题；推荐Vue 2项目锁定stylus@0.54.8 + stylus-loader@3.0.2 + vue-loader@15.9.8组合，并确保loader顺序正确、配置生效。

stylus 在 Vue 项目中报错，**绝大多数情况不是写法问题，而是依赖版本不兼容**。最新版 stylus 和 stylus-loader 经常与 Vue CLI 或 vue-loader 冲突，尤其在 Vue 2 项目（如基于 webpack 4 的老项目）中几乎必现。

为什么装了还是报 Module not found: Can't resolve 'stylus'？

这个错误表面是找不到模块，实际往往是 stylus-loader 启动时尝试 require stylus，但两者版本不匹配导致加载失败——比如 stylus-loader@6+ 要求 stylus@^0.59.0，而你装的是 stylus@0.56.0，或者反过来。

• npm install stylus stylus-loader --save-dev 后仍报此错，先检查 node_modules/stylus 是否真实存在（别名或软链损坏也会触发）
• 运行 npx stylus -V 和 npx stylus-loader --version（后者不一定支持，可改查 package.json）确认版本
• Vue 2 + webpack 4 项目强烈建议锁定组合：stylus@0.54.8 + stylus-loader@3.0.2
• 如果用了 vue-cli-service（Vue CLI 3/4），不要手动改 webpack.base.conf.js，它已被封装；改用 vue.config.js 配置 css.loaderOptions

lang="stylus" 一加就报错：Module build failed: TypeError: loader.charAt is not a function

这是典型的 vue-loader 版本过低或过高引发的 loader 链调用异常。新版 stylus-loader 返回的是函数数组或 Promise，旧版 vue-loader 试图对它调用 .charAt() ——说明它误以为那是字符串路径。

• 先执行 npm list vue-loader，若低于 15.9.8 或高于 16.x（Vue 2 不兼容 vue-loader@17+），就得降级或升到兼容版
• 推荐固定：vue-loader@15.9.8（Vue 2 最稳版本）+ stylus-loader@3.0.2 + stylus@0.54.8
• 删掉 node_modules 和 package-lock.json，再 npm install，避免残留缓存干扰

安装后 .styl 文件能 import，但

这通常是因为 vue-loader 没把 lang="stylus" 映射到对应 loader，尤其当你用的是自定义 webpack 配置或老旧脚手架。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 确保 vue.config.js 中有如下配置（Vue CLI 项目）：

  module.exports = {
    css: {
      loaderOptions: {
        stylus: {}
      }
    }
  }

• 非 CLI 项目（如手写 webpack），检查 module.rules 是否包含 { test: /\.styl(us)?$/, use: ['vue-style-loader', 'css-loader', 'stylus-loader'] }
• stylus-loader 必须在 css-loader 之后、vue-style-loader 之前，顺序错会导致解析失败
• 注意：Vue 3 + Vite 项目用的是 vite-plugin-stylus，和 webpack 生态完全无关，别混用

ajv-keywords 报 peer dependency warning 或编译卡住

stylus-loader@3.x 依赖 ajv-keywords@3.2.0，它强制要求 ajv@^6.0.0。如果项目里装了 ajv@8.x（比如被其他库带入），就会警告甚至中断构建。

立即学习“前端免费学习笔记（深入）”；

• 执行 npm install ajv@6.12.6 --save-dev（6.12.6 是最稳定的 v6 尾版）
• 不要用 --legacy-peer-deps 躲避，它可能掩盖更深层 loader 兼容问题
• Windows 用户看到 fsevents 警告可忽略，那是 macOS 专属，不影响 stylus 编译

真正卡住的地方往往不在语法或路径，而在三者版本咬合：Vue 版本决定 vue-loader 范围，vue-loader 决定它能接住哪个 stylus-loader，而 stylus-loader 又严格限定 stylus 小版本号。锁死组合比盲目升级更可靠。