如何在 svelte 组件 <style> 中使用 tailwindcss @apply 指令

Question

这有效：

<div class="list p-2" />

这不起作用：

<style lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  @layer components {
    .list {
      @apply p-2;
    }
  }
</style>

我查看了 Svelte 的文档，但它解释了使用 SvelteKit 的过程，但我没有使用它。我怎样才能让它发挥作用？

webpack.config.js：

...
module: {
rules: [
  {
    test: /\.css$/i,
    use: ['style-loader', 'css-loader', 'postcss-loader'],
  },

tailwind.config.js：

module.exports = {
  purge: [
    './*.html',
    './src/**/*.js',
    './src/**/*.svelte'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js：

module.exports = {
  plugins: [
    ['tailwindcss'],
    ['autoprefixer'],
  ],
};

Answer 1

您需要在Webpack中安装svelte-preprocess并使用它。svelte-loader

使用文档@import给出了一个例子：

const sveltePreprocess = require('svelte-preprocess');
...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(html|svelte)$/,
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess: sveltePreprocess({
              postcss: true
            })
          }
        }
      }
      ...
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    ...
  ]
}

（您可能需要像postcss它本身一样的各种对等依赖项，postcss-load-config具体取决于您使用的功能类型。）