問題

構建& quotscss & quot變成& quotcss & quot。 執行后會是這樣的。

如果不使用extend，它可以正常工作。 extend的編寫方式是否已經過時？ 還是有別的辦法？

發展環境

操作系統:Linux Ubuntu22.04 LTS

使用Webpack

薩斯:1.62.1

尾翼css: 3.3.2

郵政編碼:8.4.24

來源

示例. scss

@use 'tailwind.css' as *;

%button {
  background: red;
}

@layer components {
  .sample {
    @apply text-white;
    @extend %button;
  }

  .sample2 {
    background: blue;
  }
}

dist.css

@tailwind base;
@tailwind components;
@tailwind utilities;
.sample {
  background: red;
}

@layer components {
  .sample {
    @apply text-white;
  }
  .sample2 {
    background: blue;
  }
}

postcss.config.cjs

const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss('./tailwind.config.cjs')
  ]
};

tailwind.config.cjs

module.exports = {
  content: ["./src/**/**/*.{html,ts,tsx,js,jsx}","./src/backend/static/*.{html,js,css}"],
  plugins: [],
  darkMode: 'class'
}

想要& quot。樣本& quot在…的范圍內組件& quot。

dist.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .sample {
    @apply text-white;
    background: red;
  }
  .sample2 {
    background: blue;
  }
}

我自己解決了。

示例. scss

@use 'tailwind.css' as *;

@layer components {
  %button {
    background: red;
  }
  .sample {
    @apply text-white;
    @extend %button;
  }

  .sample2 {
    background: blue;
  }
}

dist.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .sample {
    background: red;
  }
  .sample {
    @apply text-white;
  }
  .sample2 {
    background: blue;
  }
}