我的Django项目中的Vite设置:
安装了尾风CSS V4,并在WebApp/ Directory中vite。
运行NPM Run Dev提供了样式,NPM运行构建输出为DIST/。import { defineConfig } from 'vite';
import { resolve } from 'path';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
tailwindcss(),
],
base: '/static/', // Important for Django to locate assets
build: {
manifest: true,
emptyOutDir: true,
outDir: resolve(__dirname, 'dist'), // Ensure the output folder is 'dist'
rollupOptions: {
input: {
tailwind: resolve(__dirname, 'src/style.css'),
},
},
},
server: {
watch: {
usePolling: true, // Ensures Django templates are watched
ignored: ['!../templates/**/*'], // Make sure templates are included
},
},
});
STATIC_URL = 'static/'
STATIC_ROOT = BASE_DIR / 'staticfiles'
STATICFILES_DIRS = [
BASE_DIR / "webapp/dist" # Matches vite config!
]
DJANGO_VITE = {
"default": {
"dev_mode": DEBUG,
}
}
<!-- templates/home.html -->
{% load django_vite %}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tailwind 🤝🏻 Django</title>
{% vite_hmr_client %}
<link rel="stylesheet" href="{% vite_asset_url 'src/style.css' %}" />
</head>
<body>
<h1 class="p-8 text-6xl inline-block font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-red-500">
Tailwind and Django!
</h1>
<h1 class="text-red-700 text-3xl">geeg</h1>
</body>
</html>
@import "tailwindcss";
问题:
由于Tailwind V4删除了Tailwind.config.js,我不知道如何正确指定Django模板的内容路径。
我需要帮助:我如何正确指定尾风V4中的Django模板路径(无tailwind.config.js)?
如果您想看一下,这是我的回购指令明确指出了更多的尾风应扫描的文件:
@source