运行npm run dev时sass-loader模块构建失败问题求助

你的问题源于依赖版本不兼容，老项目的Laravel Mix、Vue版本与你安装的高版本loader不匹配，导致编译报错，具体拆解如下：

核心问题 #

1. sass-loader版本过高：Laravel Mix 1.x采用的是旧版sass-loader配置逻辑（直接支持outputStyle选项），但你安装的v10.x改用了sassOptions嵌套配置，两者冲突引发ValidationError。
2. vue-loader版本错误：v17.x是为Vue 3设计的版本，而你的项目用Vue 2.5，版本不兼容导致Cannot read property 'styles' of undefined错误。
3. css-loader版本过高：Laravel Mix 1.x仅兼容^0.28范围的css-loader，你安装的v6.x超出兼容范围，会引发webpack配置冲突。

解决方案 #

1. 替换为兼容的依赖版本 #

修改package.json中的依赖版本，确保所有loader与Laravel Mix 1.x、Vue 2.5匹配：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "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 --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 --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.17",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "css-loader": "^0.28.11",
        "jquery": "^3.2",
        "laravel-mix": "^1.7.2",
        "lodash": "^4.17.4",
        "sass-loader": "^7.3.1",
        "vue": "^2.5.7",
        "vue-template-compiler": "^2.5.7"
    },
    "dependencies": {
        "vue-loader": "^15.9.8"
    }
}

2. 重新安装依赖 #

清理现有依赖后重新安装：

# Windows系统执行
rmdir /s /q node_modules && del package-lock.json

# Mac/Linux系统执行
rm -rf node_modules package-lock.json

# 重新安装
npm install

3. 版本选择说明 #

• sass-loader@7.3.1：Laravel Mix 1.x官方支持的最高兼容版本，完美适配旧版配置逻辑，不会出现outputStyle选项报错。
• vue-loader@15.9.8 + vue-template-compiler@2.5.7：Vue 2.x的稳定兼容组合，必须保证两者版本一致，否则会出现Vue组件编译错误。
• css-loader@0.28.11：严格匹配Laravel Mix 1.x的依赖范围，避免webpack配置冲突。

验证 #

执行npm run dev，此时应该能正常完成编译，不再出现之前的报错。

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