运行 npm serve 时收到错误消息 Module build failed (from ./node_modules/sass-loader/dist/cjs.js)
Getting error message Module build failed (from ./node_modules/sass-loader/dist/cjs.js) when running npm serve
我从事 Vue/Vuetify 项目已经有一段时间了。直到昨天一切正常。我在使用 <v-simple-table>
vuetify 组件时遇到问题,所以我决定 运行 npm install 并重新安装 vuetify:坏主意。
问题是 运行ning 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')
我已经查看了多个 post,他们都建议 运行 npm rebuild node-sass
(在管理员模式下都是如此),删除节点模块文件夹,重新安装 sass-loader,但到目前为止没有任何效果。
我的 main.js 有什么问题吗?
提前致谢!如果我需要 post 更多我的代码或其他信息,请告诉我。
编辑:添加了 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"
]
}
我不确定它是否有用,但我的 npm run build
主题颜色代码错误。当我注释掉它构建的颜色代码行时没有错误:
Vue.use(Vuetify, {
theme: {
"primary": "#FFCA28",
"secondary": "#1976D2",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})
这可能是将 sass-loader
从 v7.x 升级到 v8.x
的结果
如 release notes 所述,他们对配置进行了重大更改
检查你的 vue.config.js
- 如果你发现这样的东西:
module.exports = {
css: {
loaderOptions: {
sass: {
....some options here...
}
}
}
}
改为:
module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: {
....some options here...
}
}
}
}
}
我从事 Vue/Vuetify 项目已经有一段时间了。直到昨天一切正常。我在使用 <v-simple-table>
vuetify 组件时遇到问题,所以我决定 运行 npm install 并重新安装 vuetify:坏主意。
问题是 运行ning 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')
我已经查看了多个 post,他们都建议 运行 npm rebuild node-sass
(在管理员模式下都是如此),删除节点模块文件夹,重新安装 sass-loader,但到目前为止没有任何效果。
我的 main.js 有什么问题吗?
提前致谢!如果我需要 post 更多我的代码或其他信息,请告诉我。
编辑:添加了 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"
]
}
我不确定它是否有用,但我的 npm run build
主题颜色代码错误。当我注释掉它构建的颜色代码行时没有错误:
Vue.use(Vuetify, {
theme: {
"primary": "#FFCA28",
"secondary": "#1976D2",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})
这可能是将 sass-loader
从 v7.x 升级到 v8.x
如 release notes 所述,他们对配置进行了重大更改
检查你的 vue.config.js
- 如果你发现这样的东西:
module.exports = {
css: {
loaderOptions: {
sass: {
....some options here...
}
}
}
}
改为:
module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: {
....some options here...
}
}
}
}
}