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

Question

我正在使用Vue.jsand开发一个项目Tailwind CSS，对于同一行代码我收到此错误两次

Unknown at rule @apply css(unknownAtRules)

当使用以下样式时

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

我找到了一个将PostCSS Language Support Extensions和以下内容添加到我的 vscode 设置中的方法

"css.lint.unknownAtRules": "ignore"

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

Answer 1

我有同样的情况，我进入 vs code 设置，搜索Unknown At Rules并选择ignore那里。

Answer 2

1-首先安装VS Code插件stylelint

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

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

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

4- 添加以下内容以忽略 at 规则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
    }
}

Answer 3

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