Vue.js 项目中重复 "Unknown at rule @apply css(unknownAtRules)" 个错误

Question

我正在使用 Vue.js 和 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 代码设置，在那里搜索 Unknown At Rules 和 select ignore。

Answer 2

1-首先安装VS Code插件stylelint

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

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

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

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
    }
}

Vue.js 项目中重复 "Unknown at rule @apply css(unknownAtRules)" 个错误

duplicate "Unknown at rule @apply css(unknownAtRules)" errors in Vue.js project

css

vue.js

tailwind-css