使用 Tailwind-CSS 时如何消除这些 SASS linting 错误？

Question

我在 Gatsby.js 项目中使用 Tailwind。我的环境是 VSCode，使用 Prettier 代码格式化程序。

如何摆脱这些 linting 错误警报？

Answer 1

你必须得到 VSCode 的代码格式化程序才能解决它。

我建议您下载此 link 上可用的 Beautify。

Answer 2

.css 和 .scss 的快速解决方案（不推荐）

在您的项目的根级别，更新或创建一个目录 .vscode 和一个文件 settings.json:

将以下内容添加到 .vscode/settings.json:

{
  "css.validate": false
}

结果：

您在使用 Tailwind-CSS 时摆脱了这些 SASS linting 错误，但您禁用了 CSS 验证。

Answer 3

.css 和 .scss 的解决方案

在您的项目的根级别，更新或创建一个目录 .vscode 和一个文件 settings.json:

将以下内容添加到 .vscode/settings.json:

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

安装 vscode-stylelint 扩展程序

安装stylelint-config-standard:

npm i stylelint-config-standard -D

在根级别创建一个 stylelint.config.js 文件并添加：

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

重启vsCode

结果：

您在使用 Tailwind-CSS 时摆脱了这些 SASS linting 错误，并继续使用 stylelint 进行 css 验证。

Answer 4

如果您使用 VS Code，则可以在 Visual Studio 代码中添加对现代和实验性 CSS 的支持，方法是安装以下插件以修复使用 Tailwind CSS 指令时的错误。

https://marketplace.visualstudio.com/items?itemName=csstools.postcss

Answer 5

您可以告诉 VS Code 的 CSS linter 忽略“Unknown At Rules”（如 @tailwind）。这将使您的其余 CSS 验证完好无损：

VS 代码 -> 命令面板 -> 工作区设置 -> 搜索：CSS Unknown At Rules
设为ignore

VS Code 还可以使用 CSS > Lint: Valid Properties 将特定的 CSS 属性列入白名单，但似乎还不支持将特定的 'at rules' 列入白名单。

Answer 6

vscode 的 settings.json

中的一行修复

"scss.lint.unknownAtRules": "ignore"

Answer 7

其他答案都是热核的。就连孔子也停了下来...

这是为我做的。

要重现：设置 -> 搜索“无效顺风指令”，将此规则的值更新为“忽略”。瞧。

使用 Tailwind-CSS 时如何消除这些 SASS linting 错误？

How do you get rid of these SASS linting errors when using Tailwind-CSS?

css

sass

visual-studio-code

prettier

tailwind-css

.css 和 .scss 的快速解决方案（不推荐）

结果：

.css 和 .scss 的解决方案

结果：