Vite集成Laravel时Dev环境CSS编译异常及下拉菜单失效问题

一、样式错乱与下拉菜单失效修复 #

1. 修正Tailwind配置文件错误 #

tailwind.config.js中plugins字段格式错误，应为数组而非对象，且postcss-import属于PostCSS插件，不应放在Tailwind配置内。修改后：

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.css",
        "./resources/**/*.js" // 若有JS文件使用Tailwind类，建议添加
    ],
    theme: {
        extend: {
            colors: {
                primary: '#3b3737',
                secondary: {
                    100: '#E2E2D5',
                    200: '#888883'
                }
            },
            fontFamily: {
                body: ['Inter']
            }
        }
    },
    plugins: [] // 改为空数组，需使用Tailwind官方插件时再添加
}

2. 调整CSS导入顺序 #

app.css导入顺序错误，Tailwind指令应优先于自定义CSS，避免样式被覆盖。修改后：

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import "./normalize.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./custom.css"; // 放在Tailwind指令之后，确保自定义样式正常叠加

.btn{
    @apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer;
}

3. 校验下拉菜单逻辑 #

确认custom.css中未覆盖max-h-0、transition-all等Tailwind类样式，当前下拉菜单容器未使用content类，不会与.content { display: none; }冲突，无需额外调整。

二、Vite服务器崩溃（ENOSPC错误）修复 #

该错误源于系统文件监视器数量限制不足，Vite无法监听过多文件，解决方式：

1. 临时提升文件监视器限制（Linux系统） #

在终端执行：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

2. 优化Vite监听范围 #

在vite.config.js中忽略不必要的监听目录：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: 'begging.test',
        https: false,
        hmr: {
            host: 'begging.test',
        },
        watch: {
            ignored: ['node_modules/**', 'storage/**', 'vendor/**'] // 排除无需监听的目录
        }
    },
    plugins: [
        laravel([
            'resources/css/app.css'
        ]),
    ],
});

3. 重启Vite服务 #

停止当前npm run dev进程，重新启动即可生效。

内容的提问来源于stack exchange，提问作者Tom Morison