Vue.js 如何解决；“应使用分号”；警告（应为css分号）

我试图在Nuxt.js Vue文件的

标记中使用Tailwindcss

@apply

指令。一切都很好，但我总是看到一些恼人的红色曲线。拜托，伙计们，我需要帮助。。。谢谢大家!

下面是一个示例和一个片段：

.头衔{
@应用文本定向字体光块text-5xl pt-2；
}
.留言{
@应用字体灯pb-4文本方向文本-2xl文本蓝色bayoux
}

我认为您使用的是prettier，当您在一行中执行

@apply

时，该插件会出错，请尝试以下操作：

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

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

.头衔{
@应用文本定向；
@应用字体光；
@应用程序块；
@应用text-5xl；
@应用pt-2；
}
.留言{
@应用字体光；
@应用pb-4；
@应用文本定向；
@应用text-2xl；
@应用文本蓝色bayoux；
}

我对Nuxt也有同样的问题，解决方法是按照以下步骤操作，TL:DR是：

安装stylelint vscode扩展

在stylelint.config.js中添加此配置

在vscode配置中，取消选中css validate选项，或将其添加到vscode settings.json文件

“css.validate”：false

有了这些步骤，一切都将完美地工作

---

以防万一，我也遇到了更漂亮的格式问题，在我的vscode settings.json文件

“vetur.format.defaultFormatter.html”中使用此选项解决了这个问题：“prettier”，

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

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

npm安装--保存dev stylelint stylelint配置标准
纱线添加-D样式皮棉样式皮棉配置标准

在项目的根目录中创建一个

stylelint.config.js

。（与package.json的存储位置相同）

将此代码段放入其中：

module.exports={
扩展：[“stylelint配置标准”]，
规则：{
“在规则不未知的情况下”：[
是的，
{
智力障碍：[
“顺风”，
“申请”，
“变体”，
“响应性”，
“屏幕”，
],
},
],
“声明块尾随分号”：null，
“无下降特异性”：空，
},
};

将这些扩展安装到VS代码设置中：

最后但并非最不重要的一点是，调整本地或全局VS Codesettings.json文件以包括：

“css.validate”：false，
“less.validate”：false，
“scss.validate”：false，

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

2步

将以下行添加到：.vscode>settings.json中

安装StyleLint扩展

---

重启，完成了

禁用Vetur的样式验证

此类CSS警告可能源于Vetur扩展，如果警告图标（如VSCode的“问题”窗格中所示）是Vue徽标，则很可能就是这种情况

通过禁用Vetur的样式验证，您可能会失去其他好处。不过，从长远来看，依赖功能更全面的验证器/linter可能比依赖此扩展更好

转到Vetur扩展设置并取消选中样式验证选项

---或---

在项目根目录中的

.vscode/settings.json

文件中，为每个项目设置选项，如下所示：

“vetur.validation.style”：false

---

维图尔警告类似于：

我找到了另一个解决方案

只需将

lang=“postsss”

添加到

style

标记，通过此修复，我没有任何错误

.头衔{
@应用text-purple-600字体粗体；
}

我使用VS代码，并将以下内容添加到我的设置中：

“文件.关联”：{
*.vue:“html”
}

---

之后，错误消失了。

尝试添加扩展名；它在Visual Studio代码中添加了对现代和实验性CSS的支持。

Ali Hosseini，我没有使用prettier。然而，你的建议奏效了；但我也想知道如何避免@apply跨越多行。非常感谢。你的ide是什么？！我不熟悉svcode，也不知道它是什么，但是如果你是说vscode，那么右键点击页面，选择

Format Document with…

，检查你的代码格式化程序是什么（我相信问题出在格式化程序上）。对不起，我想说vscode。然而，问题已经解决。我不得不禁用某个使用prettier格式化代码库的扩展（vetur）。现在一切都好了。谢谢谢谢，这特别适用于角度项目，使用prettier进行顺风起毛

“vetur.validation.style”：false，

通过stylelint设置为我解决了一些问题。但我不知道stylelint的本质，因为只应用了第三步就解决了问题。前两步只是为了防止项目使用stylelint。我需要运行

npx stylelint“***.css”--fix

之后帮助修复突出显示的问题。我的

设置.json

是这样的：``{“emmet.excludeLanguages”：[“markdown”]，“emmet.includeLanguages”：{“erb”：“html”，“html eex”：“html”}，“editor.fontSize”：13，“workbench.iconTheme”：“材质图标主题”，“workbench.colorTheme”：“材质主题更暗，对比度更高”，“json.schemas:[]}``我把这些值放在哪里？```` css.validate:false，“less.validate”：false，“scss.validate”：false，`` inside

json.schemas

？我尝试了你的建议，它确实消除了错误消息，但我仍然会重新考虑

rules: {
   'at-rule-no-unknown': [
     true,
     {
       ignoreAtRules: [
         'tailwind',
         'apply',
         'variants',
         'responsive',
         'screen',
       ],
     },
   ],
   'declaration-block-trailing-semicolon': null,
   'no-descending-specificity': null,
 },

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

https://marketplace.visualstudio.com/items/shinnn.stylelint