如何在不触发Gulp错误的情况下通过Stylelint的"context"检查？

我编写了以下CSS媒体查询代码：

@media (min-width: 965px) {
    #my-class {
        justify-content: flex-end;
    }
}

这段代码触发了Stylelint的错误提示：

✖  Expected "context" media feature      media-feature-range-notation
             range notation

按照提示将语法修改为现代媒体查询格式后：

@media (width >= 965px) {
    #my-class {
        justify-content: flex-end;
    }
}

又遇到了Gulp编译报错：

Error: unclosed parenthesis in media query expression

需要解决同时通过Stylelint检查且不触发Gulp错误的问题。

方案1：调整Stylelint规则兼容传统语法 #

修改Stylelint配置文件（如.stylelintrc或.stylelintrc.json），将media-feature-range-notation规则设置为"prefix"，允许使用min-width/max-width这类前缀式的传统媒体查询语法，这样既能通过Stylelint检查，又能被Gulp正确编译。

配置示例：

{
  "rules": {
    "media-feature-range-notation": "prefix"
  }
}

方案2：升级Gulp依赖支持现代语法 #

如果希望保留width >= 965px这种CSS Media Queries Level 4的现代语法，需要确保Gulp使用的CSS处理工具支持该语法：

• 升级postcss、postcss-preset-env等依赖包
• 在PostCSS配置中启用对媒体查询Level 4语法的支持，让Gulp能正确解析并编译这种语法

内容的提问来源于stack exchange，提问作者Raj