如何解决分号预期css(css-semicolonexpected)

Question

我试图在Nuxtjs Vue文件的标签中使用Tailwindcss'@apply'指令，一切都很好，但我一直得到一些恼人的红色方格线。拜托，伙计们，我需要帮助...... 谢谢！下面是一个截图和一个片段。

截图

<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

我认为你使用的是Prettyer，而这个插件在你制作的时候会出现错误。@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>

Answer 2

我在使用Nuxt时也遇到了同样的问题 解决方法是按照以下步骤操作 在此博客中，TL:DR是。

1. 安装stylelint vscode扩展
2. 在你的stylelint.config.js中添加这个配置。

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

3. 在vscode配置中取消选中css validate选项，或者将其添加到你的vscode settings.json文件中。"css.validate": false

有了这个步骤，所有的工作将完美。

以防万一我的vscode settings.json文件中的这个选项解决了这个问题。"vetur.format.defaultFormatter.html": "prettier",

Answer 3

你在应用行的末尾缺少分号。

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