vue.js - 如何解决 "semi-colon expected"警告(css-semicolonexpected)

Question

我正在尝试使用 Tailwindcss @apply <style> 中的指令Nuxt.js Vue 文件的标签。一切正常，但我不断收到一些烦人的红色波浪线。拜托了，伙计们，我需要帮助...谢谢!
下面是一个 screenshot和一个片段:

<style scoped>

.title {
  @apply text-orient font-light block text-5xl pt-2;
}

.message {
  @apply font-light pb-4 text-orient text-2xl text-blue-bayoux
}
</style>

Answer 1

在 VS Code 中没有解决此问题的内置方法。解决此问题的推荐方法是使用 Stylelint 扩展来处理 CSS linting(& SCSS 和/或 Less 等)。它非常强大，除了为您消除这些错误之外，还可能会改进您的样式表。

您需要将 styleint 依赖项添加到您的项目中。运行:

npm install --save-dev stylelint stylelint-config-standard

yarn add -D stylelint stylelint-config-standard

创建一个 stylelint.config.js在您项目的根目录中。 (存储 package.json 的相同位置)

将此片段放入其中:

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

将这些扩展安装到您的 VS Code 设置中:

Stylelint

Tailwind CSS IntelliSense

最后但并非最不重要的一点是，调整您的本地或全局 VS Code settings.json要包含的文件:

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

通过这种方式，您将“禁用” native linting，但仍确保使用 Tailwind IntelliSense 插件对其进行 linting。