Tailwind CSS + VueJS单文件组件和VS Code集成

wpx232ag 于 5个月前发布在其他

关注(0)|答案(4)|浏览(86)

如何正确配置Tailwind CSS和VS Code，以至少禁用VueJS单文件组件（vue-js）中的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>

字符串

css

来源：https://stackoverflow.com/questions/56063082/tailwind-css-vuejs-single-file-component-and-vs-code-integration

4条答案

按热度按时间

mbskvtky1#

我得到了它的工作与这个guide的帮助
TLDR
1.安装VS Code插件stylelint（发布者名称：stylelint）
1.禁用项目的scss / css验证。按F1并搜索“settings json”。
settings.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代码以查看更改

赞(0）回复(0）举报 5个月前

t2a7ltrp2#

您也可以将其添加到VS Code工作区设置（.vscode/settings.json）：

{
  "scss.lint.unknownAtRules": "ignore"
}

字符串

赞(0）回复(0）举报 5个月前

b4qexyjb3#

也许删除lang=“scss”或直接在模板中使用类应该工作？

赞(0）回复(0）举报 5个月前

qgzx9mmu4#

我通过将我的风格的lang属性更改为“postcss”来修复这个错误。Tailwind本质上是一个PostCSS插件。
第一个月

赞(0）回复(0）举报 5个月前

我来回答

Tailwind CSS + VueJS单文件组件和VS Code集成

4条答案

相关问题

热门标签

最新问答