laravel npm run watch 不会将 Sass 文件编译成 CSS答案

【问题标题】：laravel npm run watch does not compile Sass file into CSSlaravel npm run watch 不会将 Sass 文件编译成 CSS
【发布时间】：2021-06-30 17:14:19
【问题描述】：

我有一个 Laravel 项目，我正在尝试使用 npm run watch 将 Sass 编译成 CSS，但我在终端日志中收到以下错误：[webpack-cli] Invalid configuration object。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。

configuration.entry['/js/app'] 不应包含两次“D:\xampp\htdocs\laravel\epood5\resources\js\app.js”项。 -> 所有模块在启动时加载。最后一个是导出的。 npm 错误！代码生命周期 npm 错误！错误号 2 npm 错误！ epood4@1.0.0 开发：cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch" npm 错误！退出状态 2 npm 错误！ npm 错误！在 epood4@1.0.0 开发脚本中失败。 npm 错误！这可能不是 npm 的问题。上面可能还有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志： npm 错误！ C:\Users\Rasmus\AppData\Roaming\npm-cache_logs\2021-04-04T15_18_53_974Z-debug.log npm 错误！代码生命周期 npm 错误！错误号 2 npm 错误！ epood4@1.0.0 观看：npm run development -- --watch npm 错误！退出状态 2 npm 错误！ npm 错误！在 epood4@1.0.0 监视脚本中失败。 npm 错误！这可能不是 npm 的问题。上面可能还有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志： npm 错误！ 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"
}

【问题讨论】：

标签： laravel webpack laravel-mix

【解决方案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"
    }
}

【讨论】：