SassError：@extend 类失败：tailwind vue 无法将多个 tailwind 类合并为一个自定义类

Posted 2023-03-07

【中文标题】SassError：@extend 类失败：tailwind vue 无法将多个 tailwind 类合并为一个自定义类

【英文标题】：SassError: failed to @extend class: tailwind vue can't unite several tailwind classes into a single custom class

【发布时间】：2020-09-25 06:56:27

【问题描述】：

我有一个看起来像这样的vue 组件：

<template>
    <ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
        <li class="flex-1 md:flex-none md:mr-3
                    sm:text-xs md:text-xs lg:text-xs xl:text-sm">
            <a class="inline-block py-2 px-4
                    text-white no-underline" href="#">Link1</a>
        </li>

        <li class="flex-1 md:flex-none md:mr-3
                    sm:text-xs md:text-xs lg:text-xs xl:text-sm">
            <a class="inline-block py-2 px-4
                    text-white no-underline" href="#">Link2</a>
        </li>

       ...

  </ul>
</template>

可以看出，所有导航栏链接都有相同的顺风类。我想将所有这些类合并为一个类navbar-item。我尝试将以下内容添加到.vue 文件中：

<style lang = "scss" scoped>
    @import "../assets/css/tailwind.css";
    @import "../assets/css/style.css";

    .navbar-item 
        @extend .flex-1, .md\:flex-none, .md\:mr-3,
            .sm\:text-xs, .md\:text-xs, .lg\:text-xs, .xl\:text-sm;
     
</style>

但是我得到了

SassError: ".navbar-item" failed to @extend ".flex-1".

错误。

我不确定如何解决它。任何帮助表示赞赏。

【参考方案1】：

使用 @apply 将任何现有的实用程序类内联到您自己的自定义 CSS 中。检查docs

例如

/* Won't work: */
.btn 
  @apply block bg-red-500;
  @apply hover:bg-blue-500;
  @apply md:inline-block;


/* Do this instead: */
.btn 
  @apply block bg-red-500;

.btn:hover 
  @apply bg-blue-500;

@screen md 
  .btn 
    @apply inline-block;