顺风指令@apply在Nuxt上不起作用

npm install sass sass-loader@^10 fibers deepmerge --save-dev

import { join } from 'path';

export default function (moduleOptions) {
  // 添加CSS预处理器（如Sass）的配置
  const sassLoaderOptions = {
    implementation: require('sass'),
    sassOptions: {
      fiber: require('fibers'),
      includePaths: [join(__dirname, 'assets/styles')],
    },
  };

  // 在构建期间添加CSS预处理器的加载器
  this.extendBuild((config) => {
    const loaders = [
      {
        loader: 'sass-loader',
        options: sassLoaderOptions,
      },
    ];

    // 查找并更新原有CSS加载器的配置
    config.module.rules.forEach((rule) => {
      if (rule.test.toString() === '/\\.css$/') {
        rule.oneOf.forEach((loader) => {
          if (loader.use && loader.use.length > 0) {
            loader.use.push(...loaders);
          }
        });
      }
    });
  });
}

export default {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/sass.js', mode: 'client' },
    // ...
  ],
  // ...
}

/* main.scss */
.my-button {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

<template>
  <div>
    <button class="my-button">Click me</button>
  </div>
</template>