laravel npm run watch不将Sass文件编译为CSS

Question

我有一个Laravel项目，我试图使用npm run watch将Sass编译成CSS，但在终端日志中出现以下错误：[webpack cli]无效的配置对象。已使用与API架构不匹配的配置对象初始化Webpack。

• 配置。条目['/js/app']不应包含项目“D:\xampp\htdocs\laravel\epood5\resources\js\app”。两次-

npm错误！此运行的完整日志可在以下位置找到：npm ERR！C:\Users\Rasmus\AppData\Roaming\npm-cache_logs\2021-04-04T15_18_53_974Z-debug。记录npm错误！代码ELIFECYCLE npm ERR！呃2 npm呃！epood4@1.0.0观察：npm运行开发--watchnpm ERR！退出状态2 npm错误！npm错误！那次失败了epood4@1.0.0看剧本。npm错误！这可能不是npm的问题。上面可能还有其他日志输出。

npm错误！此运行的完整日志可在以下位置找到：npm ERR！C:\Users\Rasmus\AppData\Roaming\npm-cache_logs\2021-04-04T15_18_54_007Z-debug。日志

资源/JS/APP. JS

require('./bootstrap');
require('alpinejs');

包. JSON

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.0",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^10.0.2",
        "axios": "^0.21.1",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0.3",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.11",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.14",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "tailwindcss": "^2.0.1",
        "vue-template-compiler": "^2.6.12",
        "webpack-cli": "^4.5.0"
    },
    "name": "epood4",
    "description": "<p align=\"center\"><a href=\"https://laravel.com\" target=\"_blank\"><img src=\"https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg\" width=\"400\"></a></p>",
    "version": "1.0.0",
    "main": "webpack.mix.js",
    "directories": {
        "test": "tests"
    },
    "dependencies": [],
    "keywords": [],
    "author": "",
    "license": "ISC"
}

Answer 1

我看到你有一个Laravel Mix的最新版本，它很好，但是你还没有更新“脚本”我还需要看看网页。混合js。现在，你可以更新你的软件包。json链接到以下内容，并更仔细地查看您的应用程序。js和网页包。混合js。

{
    "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.3.2",
        "@tailwindcss/typography": "^0.4.0",
        "alpinejs": "^2.8.2",
        "autoprefixer": "^10.2.5",
        "axios": "^0.21.1",
        "bootstrap": "^4.6.0",
        "cross-env": "^7.0.3",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.18",
        "lodash": "^4.17.21",
        "popper.js": "^1.12",
        "postcss": "^8.2.13",
        "postcss-import": "^14.0.1",
        "resolve-url-loader": "^3.1.3",
        "sass": "^1.32.12",
        "sass-loader": "^11.0.1",
        "tailwindcss": "^2.1.2",
        "vue-template-compiler": "^2.6.12",
        "webpack-cli": "^4.6.0"
    }
}