3

如何正确配置 Tailwind CSS 和 VS Code 以至少禁用 VueJS 单文件组件 (vue-cli) 中关于 at-rule 和空标记错误的错误？

<template>
...
</template>

<style lang="scss">
  body {
    // } expected
    @apply font-source pt-4;
  } // at-rule or selector expected

  h5,h4,h3,h2,h1 {
    // } expected
    @apply font-pt font-bold;
  } // at-rule or selector expected
</style>
4

3 回答 3

4

我在本指南的帮助下完成了工作

TLDR

  1. 安装 VS Code 插件 stylelint（发布者名称：stylelint）

  2. 禁用项目的 scss / css 验证。点击 F1 并搜索“设置 json”。

    设置.json

"scss.validate": false
"css.validate": false
  1. 添加和配置 stylelint 插件。将以下文件和内容添加到项目根目录。

    stylelint.config.js

module.exports = {
    rules: {
        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']
            }
        ],
        'declaration-block-trailing-semicolon': null,
        'no-descending-specificity': null
    }
}
  1. （可选）您“可能”需要重新启动 vs 代码才能看到更改
于 2020-06-08T21:54:40.793 回答
-1

我通过将样式的 lang 属性更改为“postcss”来修复此错误。Tailwind 本质上是一个 PostCSS 插件。

<style lang="postcss">

于 2021-09-24T08:35:07.847 回答
-1

也许删除 lang="scss" 或直接在模板中使用该类应该可以吗？

于 2019-05-29T17:56:15.113 回答