laravel npm 運行手表未將 Sass 文件編譯成 Z2C56C3605804208D5293172F2F4

Question

I have a Laravel project where I'm trying to compile Sass into CSS using npm run watch, but I'm getting the following error in terminal log: [webpack-cli] Invalid configuration object. Webpack 已使用與 API 模式不匹配的配置 object 進行了初始化。

• configuration.entry['/js/app'] 不應包含兩次 'D:\xampp\htdocs\laravel\epood5\resources\js\app.js' 項。 -> 所有模塊在啟動時加載。 最后一個是導出的。 npm 錯誤。 代碼 ELIFECYCLE npm 錯誤。 errno 2 npm ERR: epood4@1.0.0 development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch" npm ERR。 退出狀態 2 npm ERR。 npm 錯誤。 在 epood4@1.0.0 開發腳本中失敗。 npm 錯誤！ 這可能不是 npm 的問題。 上面可能還有額外的日志記錄 output。

npm ERR：此運行的完整日志可在以下位置找到：npm ERR。 C.\Users\Rasmus\AppData\Roaming\npm-cache_logs\2021-04-04T15_18_53_974Z-debug.log npm ERR: code ELIFECYCLE npm ERR! 錯誤號 2 npm 錯誤！ epood4@1.0.0 watch: npm run development -- --watch npm ERR。 退出狀態 2 npm ERR。 npm 錯誤。 在 epood4@1.0.0 監視腳本中失敗。 npm 錯誤！ 這可能不是 npm 的問題。 上面可能還有額外的日志記錄 output。

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

資源/JS/APP.JS

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

PACKAGE.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 這很好，但是你還沒有更新“腳本”。 我仍然需要查看 webpack.mix.js。 現在，您可以將 package.json 更新為以下內容，並仔細查看您的 app.js 和 webpack.mix.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"
    }
}