在文件更改后，Vite不会重新加载尾风类。

Question

在我的Laravel 9项目中，我得到了以下问题。

我们使用vite和tailwindcss，但是每当我更改blade.php文件并添加一个新类时，就不会重新编译CSS。

我的设置：

composer.json

"require": {
    "php": "^8.0.2",
    "doctrine/dbal": "^3.4",
    "guzzlehttp/guzzle": "^7.2",
    "innocenzi/laravel-vite": "0.2.*",
    "laravel/framework": "^9.19",
    "laravel/sanctum": "^3.0",
    "laravel/tinker": "^2.7"
},
"require-dev": {
    "fakerphp/faker": "^1.9.1",
    "laravel/pint": "^1.0",
    "laravel/sail": "^1.0.1",
    "mockery/mockery": "^1.4.4",
    "nunomaduro/collision": "^6.1",
    "phpunit/phpunit": "^9.5.10",
    "spatie/laravel-ignition": "^1.0"
},

package.json

{
    "private": true,
    "dependencies": {
        "@fortawesome/fontawesome-pro": "^6.2.0",
        "@tailwindcss/forms": "^0.5.3"
    },
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.12",
        "postcss": "^8.4.18",
        "tailwindcss": "^3.2.1",
        "vite": "^3.1.8",
        "vite-plugin-laravel": "^0.2.2"
    }
}

tailwind.config.js

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

vite.config.ts

import { defineConfig } from 'vite';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
import laravel, { callArtisan, findPhpPath } from 'vite-plugin-laravel';

export default defineConfig({
    plugins: [
        laravel({
            postcss: [
                tailwindcss({
                    content: [
                        './resources/**/*.blade.php',
                        './resources/viewes/**/*.blade.php',
                        './resources/**/*.js',
                        './resources/**/*.vue',
                        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
                    ],
                    watch: {
                        reloadOnBladeUpdates: true
                    }
                }),
                autoprefixer(),
            ],
            watch: {
                reloadOnBladeUpdates: true,
                input: [
                    {
                        condition: file => file.includes('resources/lang'),
                        handle: () => callArtisan(findPhpPath(), 'i18n:generate'),
                    },
                    {
                        condition: file => file.includes('routes/'),
                        handle: () => callArtisan(findPhpPath(), 'routes:generate'),
                    },
                ],
            },
        }),
    ],
});

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

通过这个设置，我运行vite和php artisan serve。但是如上所述，如果我添加了一个类，比如bg-green-500，在重新启动vite或运行vite build之前不会执行此更改。

我哪里出问题了？提前感谢！

Answer 1

这个问题与WSL2有关。

我将这一行添加到vite.config.ts中：

server: {
    watch: {
        usePolling: true
    },
},

这解决了这个问题。