Metronic 8与Laravel 8集成时执行npm run dev出现Webpack Mix失败

解决方案 #

第一个报错（Sass导入文件不存在）解决步骤 #

1. 先在webpack.mix.js头部引入path模块：

const path = require('path');

2. 找到sass编译配置项，添加sass路径包含规则，避免长相对路径匹配失败：

mix.sass('resources/src/sass/style.scss', 'public/css')
    .options({
        sassOptions: {
            includePaths: [
                path.join(__dirname, 'node_modules'),
                path.join(__dirname, 'resources/src')
            ]
        }
    })

3. 打开resources/src/sass/components/components.scss，将第6行的导入语句
   @import "../../../../tools/node_modules/bootstrap/scss/root";
   修改为
   @import "~bootstrap/scss/root";

说明：~是sass-loader内置的别名，默认指向项目根目录的node_modules文件夹，替换后无需再写冗长的相对路径。
其余scss文件中所有以../../../../tools/node_modules/开头的导入规则，都可以统一替换为~开头，避免后续出现同类路径错误。

第二个报错（scripts.js不存在）解决步骤 #

1. 从你下载的Metronic 8原始安装包中，找到tools/webpack/scripts.js文件
2. 在你的Laravel项目resources/src/目录下新建webpack文件夹，将上述scripts.js复制到该文件夹中即可。

后续操作 #

所有配置修改完成后，先执行npm install确保所有依赖安装完整，再重新运行npm run dev即可完成编译。

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