模块警告（来自./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js）：

Question

我正在尝试安装 laravel Breeze 包以进行默认身份验证。 npm run dev 后 Laravel mix 错误。我在 Laravel 9

./resources/css/app.css 中的警告 (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js ??ruleSet[1].rules[5].use[2]!./resources/css/app.css)

composer.json

{
     "name": "laravel/laravel",
        "type": "project",
        "description": "The Laravel Framework.",
        "keywords": ["framework", "laravel"],
        "license": "MIT",
        "require": {
            "php": "^8.0.2",
            "guzzlehttp/guzzle": "^7.2",
            "laravel/framework": "^9.2",
            "laravel/sanctum": "^2.14.1",
            "laravel/tinker": "^2.7"
        },
        "require-dev": {
            "fakerphp/faker": "^1.9.1",
            "laravel/breeze": "^1.9",
            "laravel/sail": "^1.0.1",
            "mockery/mockery": "^1.4.4",
            "nunomaduro/collision": "^6.1",
            "phpunit/phpunit": "^9.5.10",
            "spatie/laravel-ignition": "^1.0"
        },
        "autoload": {
            "psr-4": {
                "App\\": "app/",
                "Database\\Factories\\": "database/factories/",
                "Database\\Seeders\\": "database/seeders/"
            }
        },
        "autoload-dev": {
            "psr-4": {
                "Tests\\": "tests/"
            }
        },
        "scripts": {
            "post-autoload-dump": [
                "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
                "@php artisan package:discover --ansi"
            ],
            "post-update-cmd": [
                "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
            ],
            "post-root-package-install": [
                "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
            ],
            "post-create-project-cmd": [
                "@php artisan key:generate --ansi"
            ]
        },
        "extra": {
            "laravel": {
                "dont-discover": []
            }
        },
        "config": {
            "optimize-autoloader": true,
            "preferred-install": "dist",
            "sort-packages": true
        },
        "minimum-stability": "dev",
        "prefer-stable": true
    }

package.json

    {
        "private": true,
        "scripts": {
            "dev": "npm run development",
            "development": "mix",
            "watch": "mix watch",
            "watch-poll": "mix watch -- --watch-options-poll=1000",
            "hot": "mix watch --hot",
            "prod": "npm run production",
            "production": "mix --production"
        },
        "devDependencies": {
            "@tailwindcss/forms": "^0.4.0",
            "alpinejs": "^3.4.2",
            "autoprefixer": "^9.8.8",
            "axios": "^0.25",
            "css-loader": "^5.2.7",
            "laravel-mix": "^6.0.6",
            "laravel-mix-postcss-config": "^1.4.0",
            "lodash": "^4.17.19",
            "postcss": "^8.3.1",
            "postcss-import": "^14.0.2",
            "postcss-loader": "^3.0.0",
            "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
        }
    }

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

Answer 1

使用以下内容更新您的 package.json 并运行

npm run dev

。

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.0",
        "alpinejs": "^3.10.2",
        "autoprefixer": "^10.4.7",
        "axios": "^0.27",
        "css-loader": "^6.7.1",
        "laravel-mix": "^6.0.43",
        "laravel-mix-postcss-config": "1.0.4",
        "lodash": "^4.17.21",
        "postcss": "^8.4.13",
        "postcss-import": "^14.1.0",
        "postcss-loader": "^6.2.1",
        "tailwindcss": "^3.0.24"
    }
}

Answer 2

刚刚在“postcss.config.js”文件中注释掉了“tailwind css: {}”。问题解决了。