运行npm serve时遇到错误消息“Module build failed (from ./node_modules/sass-loader/dist/cjs.js)”。

Question

我已经在Vue/Vuetify项目上工作了相当一段时间。一切都很好，直到昨天。我使用 vuetify组件时遇到问题，所以我决定运行npm install并重新安装vuetify：这是个坏主意。

问题是当运行npm run serve时，我会多次收到以下错误：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'indentedSyntax'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (C:\Users\Jeroen\Documents\favourite_xi\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\Jeroen\Documents\favourite_xi\node_modules\sass-loader\dist\index.js:36:28)

 @ ./node_modules/vuetify/src/components/VCalendar/mixins/calendar-with-events.sass 4:14-225 14:3-18:5 15:22-233
 @ ./node_modules/vuetify/lib/components/VCalendar/mixins/calendar-with-events.js
 @ ./node_modules/vuetify/lib/components/VCalendar/VCalendar.js
 @ ./node_modules/vuetify/lib/components/VCalendar/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.178.115:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

我的main.js文件：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import Vuetify from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(Vuetify, {
  theme: {
    "primary": "#FFCA28",
    "secondary": "#1976D2",
    "accent": "#82B1FF",
    "error": "#FF5252",
    "info": "#2196F3",
    "success": "#4CAF50",
    "warning": "#FB8C00"
  }
})

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

我已经查看了多篇文章，它们都建议运行npm rebuild node-sass（常规模式和管理员模式），删除node-modules文件夹，重新安装sass-loader，但迄今为止都没有起作用。

也许我的main.js有问题吗？

提前感谢！如果需要发布更多代码或其他信息，请告诉我。

编辑：添加package.json

{
  "name": "favourite_xi",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.22",
    "core-js": "^2.6.5",
    "node-sass": "^4.12.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "uuid": "^3.3.3",
    "vue": "^2.6.10",
    "vue-cool-select": "^2.10.2",
    "vue-flip": "^0.3.0",
    "vue-responsive-text": "^0.1.4",
    "vue-router": "^3.0.3",
    "vuetify": "^2.0.16",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.10.1",
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

- Jeroen Meijer

---

那么，删除 node_modules 后你的 npm install 运行成功了吗？ - ssc-hrep3

你在 package.json 中更新了什么吗？似乎你的节点模块之间存在不兼容性。请参见此处：https://github.com/vuejs/vue-cli/issues/4513 更新 vue-cli 可能会解决这个问题。 - ssc-hrep3

感谢您的回复。更新vue-cli没有帮助。删除我的node-modules后，npm install运行了，但仍然没有成功。 - Jeroen Meijer

刚刚检出了一个较旧的提交。这也不再起作用了... - Jeroen Meijer

尝试了以下步骤：删除了节点模块和package-lock.json。更新了Vue CLI。运行了npm i。用旧的（可工作的）提交中的package.json替换了当前的文件。但是仍然出现相同的错误。 - Jeroen Meijer

你现在遇到了同样的问题，但你能解决吗？ - Shulz

Answer 1

这可能是将 sass-loader 从 v7.x 升级到 v8.x 的结果。

如在 发行说明 中所述，他们对配置进行了重大更改。

检查你的 vue.config.js 文件 - 如果你发现类似以下的内容：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        ....some options here...
      }
    }
  }
}

将其更改为：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          ....some options here...
        }
      }
    }
  }
}

- Michal Levý

Answer 2

我不确定这是否有用，但我的npm run build在主题的颜色代码处出现错误。当我注释掉颜色代码行时，它可以无错误地构建：

    Vue.use(Vuetify, {
      theme: {
        "primary": "#FFCA28",
        "secondary": "#1976D2",
        "accent": "#82B1FF",
        "error": "#FF5252",
        "info": "#2196F3",
        "success": "#4CAF50",
        "warning": "#FB8C00"
      }
    })

- user3379175