如何使用vite? 我使用Vite将Tailwind CSS V4与Django集成在一起,但是我面临的问题只能从Vite应用中检测到类别,并且无法识别Django模板中添加的新类。 W ...

问题描述 投票:0回答:0

我的Django项目中的Vite设置:

安装了尾风CSS V4,并在WebApp/ Directory中vite。

运行NPM Run Dev提供了样式,NPM运行构建输出为DIST/。
  1. 配置Vite(vite.config.js):
  • 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 }, }, });
  • 配置Django静态文件(settings.py):
  1. STATIC_URL = 'static/' STATIC_ROOT = BASE_DIR / 'staticfiles' STATICFILES_DIRS = [ BASE_DIR / "webapp/dist" # Matches vite config! ] DJANGO_VITE = { "default": { "dev_mode": DEBUG, } }
aupped我的django模板(模板/home.html):

    <!-- 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>
  1. webApp/src/:configured style.css:
    @import "tailwindcss";
问题:
  1. TailWind仅检测我的Vite应用程序(SRC/)的类,但未检测到Django模板中添加的新类。
如果我在Vite测试中使用诸如Text-Red-500的类,则可以使用。但是,如果我尝试在Django模板中使用Text-Red-600,则不适用。

由于Tailwind V4删除了Tailwind.config.js,我不知道如何正确指定Django模板的内容路径。

我需要帮助:

我如何正确指定尾风V4中的Django模板路径(无tailwind.config.js)?

如果您想看一下,这是我的回购
    githubrepo
  • 任何帮助将不胜感激! 🚀
  • 当您总结一下,当使用Vite插件时,tailwind仅在Vite的模块图中扫描文件以生成类名称。您的django模板不会在此模块图中,因为它们不是由Vite处理的。
要解决此问题,您可以使用

指令明确指出了更多的尾风应扫描的文件:

@source

django frontend tailwind-css vite
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.