Stylus编译报错与语法兼容常见问题汇总及修复代码示例
一、文档概述
Stylus是轻量、简洁的CSS预处理器，语法极简、缩进驱动，相比Sass、Less代码更精简。但新手极易出现缩进错误、语法兼容、变量调用、混合使用、编译失效等问题。本文汇总高频Stylus报错问题，搭配错误案例、正确修复代码与问题解析，帮助开发者快速排错，适配前端项目开发与打包编译场景。
二、运行环境
- 编译工具：stylus、vite-plugin-stylus
- 语法规范：缩进语法（严格空格缩进，禁止Tab）
- 适配场景：Vue、React、静态页面样式开发
三、十大高频问题错误 & 修复代码演示
问题1：Tab与空格混用导致编译失败
错误代码
.container
width 100%
height 500px // Tab缩进，报错
正确代码
.container
width 100%
height 500px
解析：Stylus为缩进敏感语法，必须统一4空格缩进，禁止Tab，否则直接编译报错。
问题2：属性冒号多余/缺失报错
错误代码
.box
color : #fff
font-size 16px;
正确代码
.box
color #fff
font-size 16px
解析：Stylus无需冒号、分号，多余符号会触发语法解析异常。
问题3：变量定义作用域失效
错误代码
.box
bg = #1677ff
.container
background bg
正确代码
bg = #1677ff
.box
background bg
.container
background bg
解析：块级变量仅当前层级生效，全局变量需顶行定义。
问题4：嵌套层级错误、层级穿透失效
错误代码
.box
.item color red
正确代码
.box
.item
color red
解析：嵌套选择器必须单独换行+缩进，行内简写会编译层级错乱。
问题5：混合mixin传参报错
错误代码
border-radius(n)
border-radius n
.box
border-radius 10px 20px
正确代码
border-radius(n)
border-radius n
.box
border-radius(10px)
解析：多参数未规范传参、无括号调用会导致mixin解析失败。
问题6：导入文件路径编译报错
错误代码
@import "common.styl"
修复方案：相对路径补全，避免别名识别失败
@import "./common.styl"
问题7：运算符空格缺失报错
错误代码
w=100px
.box
width w-20px
正确代码
w = 100px
.box
width w - 20px
问题8：!important 使用语法错误
错误代码
color red !important
正确代码
color red!important
问题9：注释格式错误编译告警
错误代码
// 单行注释
/* 多行
注释 */
规范写法：Stylus仅支持 // 单行注释
问题10：父级引用&使用错误
错误代码
.box
hover
color red
正确代码
.box
&:hover
color red
四、通用排错总结
- 统一代码缩进：全程4空格，禁用Tab键；
- 去除冗余符号：不写冒号、分号，遵循Stylus极简语法；
- 变量全局定义，避免块级作用域污染失效；
- 伪类、嵌套选择器必须搭配&符号规范编写；
- 编译报错优先检查缩进、符号、路径三大核心问题。
本文覆盖90%以上Stylus开发编译异常，可作为日常开发速查手册，快速解决样式编译、语法兼容问题。
海量精选技术文档和实战案例持续更新，敬请关注【风骏时光少年】
