如何在苗条组件<style>中使用顺风 css @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

您需要安装svelte-preprocess并在Webpack的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，这取决于您使用的特性类型。)