Laravel项目执行npm run dev构建Sass时出现模块找不到错误

我在Laravel项目中执行npm run dev构建Sass文件时遇到模块找不到的错误，尝试过--force重新安装依赖、更新webpack.mix、降级npm和node版本都无法解决。

错误日志 #

> @gainhq/pipex@ dev D:\yarb yzb6
> mix


✖ Mix
  Compiled with some errors in 732.20ms

ERROR in /js/core
Module not found: Error: Can't resolve 'D:\yarb yzb6\resources\js\mainApp.js' in 'D:\yarb yzb6'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?       

ERROR in /js/core
Module not found: Error: Can't resolve 'D:\yarb yzb6\resources\sass\_global.scss' in 'D:\yarb yzb6'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?       

ERROR in /js/core
Module not found: Error: Can't resolve 'D:\yarb yzb6\resources\sass\core\core.scss' in 'D:\yarb yzb6'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?       

webpack compiled with 3 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @gainhq/pipex@ dev: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @gainhq/pipex@ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\DRR8158\AppData\Roaming\npm-cache\_logs\2023-10-17T11_50_27_748Z-debug.log

我的webpack.mix配置 #

const mix = require("laravel-mix");
const path = require('path');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.setPublicPath("public")
    .setResourceRoot("../") // Turns assets paths in css relative to css file
    // .options({
    //     processCssUrls: false,
    // })
    .sass("resources/sass/core/core.scss", "css/core.css")
    .sass("node_modules/dropzone/src/dropzone.scss", "css/dropzone.css")
    .sass("resources/sass/_global.scss", "css/fontawesome.css")
    .js("resources/js/mainApp.js", "js/core.js").vue()
    .extract([
        // Extract packages from node_modules to vendor.js
        "jquery",
        "bootstrap",
        "popper.js",
        "axios",
        "sweetalert2",
        "lodash"
    ])
    .sourceMaps();
mix.webpackConfig({
    resolve: {
        alias: {
            "@app": path.resolve(__dirname, "resources/js/crm/"),
            "@core": path.resolve(__dirname, "resources/js/core/")
        }
    }
});
if (mix.inProduction()) {
    mix.version().options({
        // Optimize JS minification process
        terser: {}
    });
} else {
    // Uses inline source-maps on development
    mix.webpackConfig({
        devtool: "inline-source-map",
    });
}

解决方案 #

• 确认文件存在性：检查resources/js/mainApp.js、resources/sass/_global.scss、resources/sass/core/core.scss这三个文件是否确实存在于项目对应路径，注意文件名大小写（Windows系统不区分大小写，但Webpack处理时可能出现匹配问题）。
• 修复resolve.extensions配置：错误提示明确指出缺少扩展名的前导点，需要在webpack配置中添加正确的扩展名列表。修改webpackConfig部分：

  mix.webpackConfig({
      resolve: {
          alias: {
              "@app": path.resolve(__dirname, "resources/js/crm/"),
              "@core": path.resolve(__dirname, "resources/js/core/")
          },
          extensions: [".*", ".wasm", ".mjs", ".js", ".jsx", ".json", ".vue", ".scss"]
      }
  });
  

• 合并webpack配置：当前代码在开发环境中单独调用webpackConfig会覆盖之前的配置，需要合并配置而非覆盖。可以将开发环境的devtool配置合并到主配置中：

  const baseWebpackConfig = {
      resolve: {
          alias: {
              "@app": path.resolve(__dirname, "resources/js/crm/"),
              "@core": path.resolve(__dirname, "resources/js/core/")
          },
          extensions: [".*", ".wasm", ".mjs", ".js", ".jsx", ".json", ".vue", ".scss"]
      }
  };
  
  if (!mix.inProduction()) {
      baseWebpackConfig.devtool = "inline-source-map";
  }
  
  mix.webpackConfig(baseWebpackConfig);
  

• 调整Sass局部文件编译方式：以下划线开头的_global.scss通常是Sass局部文件，用于被其他Sass文件导入，而非单独编译。可以将其内容导入到core.scss中，然后移除单独编译_global.scss的代码；如果确实需要单独编译，可去掉文件名开头的下划线。

内容的提问来源于stack exchange，提问作者ayed alqhtanie