vue3+ts+vite配置stylelint后报错?

Question

问题：配置stylelint格式化后，在app.vue内使用如下@media媒体查询，会报错，

<style scoped lang="less">
  @media (width >= 1024px) {
    header {
      display: flex;
      place-items: center;
      padding-right: calc(var(--section-gap) / 2);
    }
  }
</style>

报错提示如下，请问是什么原因？

1、pnpm安装
pnpm add stylelint postcss postcss-less postcss-html stylelint-config-prettier stylelint-config-recommended-less stylelint-config-standard stylelint-config-standard-vue stylelint-less stylelint-order -D

    "postcss": "^8.4.21",
    "postcss-html": "^1.5.0",
    "postcss-less": "^6.0.0",
    "prettier": "^2.8.4",
    "sass": "^1.60.0",
    "stylelint": "^15.4.0",
    "stylelint-config-prettier": "^9.0.5",
    "stylelint-config-recommended-less": "^1.0.4",
    "stylelint-config-standard": "^32.0.0",
    "stylelint-config-standard-vue": "^1.0.0",
    "stylelint-less": "^1.0.6",
    "stylelint-order": "^6.0.3",

2、.stylelintrc.cjs配置：

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-less',
    'stylelint-config-standard-vue',
    'stylelint-config-prettier'
  ],
  overrides: [
    {
      files: ['**/*.(less|css|vue|html)'],
      customSyntax: 'postcss-less'
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html'
    }
  ],
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json', '**/*.md', '**/*.yaml'],
  rules: {}
}

Answer 1

你在使用 @media 媒体查询时，使用了不支持的 CSS 语法，导致 stylelint 报错。具体来说，stylelint 不支持 >= 运算符，因此你需要将它改成 min-width: 1024px 这样的格式，这样就可以避免报错了。使用类似 >= 这样的运算符，你可以考虑使用 SCSS 或 LESS 等预处理器，在编译时将它们转换成合法的 CSS 语法。或者你也可以使用 CSS 变量和计算函数来实现类似的效果。

@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
}

stylelint 不会自动解析 CSS 变量或计算函数，如果你使用了这些语法，需要在 stylelint 配置文件中添加相应的插件或规则来支持。