SassError: 未能@extend class: 顺风 vue 无法将多个顺风类合并到一个自定义 class

Question

I have a vue component that looks like this:

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

As can be seen, all navbar links have the same tailwind classes. I want to unite all those classes into a single class navbar-item . I tried to add the following to the .vue file:

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

However I get the

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

error.

I'm not sure how to fix it. Any help is appreciated.

Answer 1

Use @apply to inline any existing utility classes into your own custom CSS. Check docs

eg

/* 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;
  }
}