這有效：
<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'],
],
};
uj5u.com熱心網友回復：
您需要在for 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具體取決于您使用的功能型別。）
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/484704.html
標籤：javascript 网页包 顺风CSS 苗条 postcss