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

2023-04-05 0 1,961

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

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

报错提示如下,请问是什么原因?

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: {}
}
你在使用 @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 配置文件中添加相应的插件或规则来支持。
vue3+ts+vite配置stylelint后报错?
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 有软官网所有资源来源于开发团队,加入会员即可下载使用!如有问题请联系右下角在线客服!
2. 有软官方保障所有软件都通过人工亲测,为每位会员用户提供安全可靠的应用软件、游戏资源下载及程序开发服务。
3. 有软团队针对会员诉求,历经多年拥有现今开发成果, 每款应用程序上线前都经过人工测试无误后提供安装使用,只为会员提供安全原创的应用。
4. PC/移动端应用下载后如遇安装使用问题请联系右下角在线客服或提交工单,一对一指导解决疑难。

有软官网_用软件,找有软 技术分享 vue3+ts+vite配置stylelint后报错? https://www.jiaruvip.com/1330.html

有软应用商店是经过官方安全认证,保障正版软件平台

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务