在 Vue.js 项目中重复“规则 @apply css(unknownAtRules) 中的未知”错误

我正在使用 Vue.jsTailwind CSS 开发一个项目,我在同一行代码中两次收到此错误

Unknown at rule @apply css(unknownAtRules)

VS Code Screenshote

使用以下样式时

<style scoped>
     #home {
       @apply bg-accent-gradient;
     }
</style>

我找到了将 PostCSS Language Support Extensions 和以下内容添加到我的 vscode 设置的灵魂

"css.lint.unknownAtRules": "ignore"

我添加了它,但它只删除了一个错误,而不是两个错误。

stack overflow duplicate "Unknown at rule @apply css(unknownAtRules)" errors in Vue.js project
原文答案
author avatar

接受的答案

1- 首先安装 VS Code 插件 stylelint

2-然后禁用项目的 css 和 scss 验证。 (ctrl+shift+p) 并搜索“设置 json”。

"scss.validate": false
"css.validate": false

3- 在项目根目录 stylelint.config.js 中创建 stylelint 插件配置文件

4- 添加以下内容以在规则 apply, tailwind,etc 处忽略:

module.exports = {
    rules: {
        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']
            }
        ],
        'declaration-block-trailing-semicolon': null,
        'no-descending-specificity': null
    }
}

答案:

作者头像

我有同样的情况,我去了 vs 代码设置,搜索 Unknown At Rules 并在那里选择 ignore

enter image description here

作者头像

在按照其他答案的建议开始调试问题之前,请确保您在 VScode 中安装了 csstools.postcss 扩展。

相关问题