时间戳

首页 > 解决方案 > 如何解决“预期分号”警告（css-semicolonexpected）

vue.js - 如何解决“预期分号”警告（css-semicolonexpected）

问题描述

我正在尝试在Nuxt.js Vue 文件@apply的标记中使用 Tailwindcss 指令。<style>一切正常，但我不断收到一些恼人的红色波浪线。拜托，伙计们，我需要帮助...谢谢！

下面是一个截图和一个片段：

在此处输入图像描述

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

标签： vue.jsnuxt.jstailwind-css

解决方案

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

  1. 您需要将 styleint 依赖项添加到您的项目中。跑：
npm install --save-dev stylelint stylelint-config-standard

yarn add -D stylelint stylelint-config-standard
  1. 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,
  },
};
  1. 将这些扩展安装到您的 VS Code 设置中：
  1. 最后但同样重要的是，调整您的本地或全局 VS Codesettings.json文件以包括：
"css.validate": false,
"less.validate": false,
"scss.validate": false,

这样，您将“禁用”本机 linting，但仍确保使用 Tailwind IntelliSense 插件对其进行 linting。

推荐阅读