私はVue/Vuetifyプロジェクトにかなり長い間取り組んでいます。昨日まですべてうまくいきました。 <v-simple-table>
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"
]
}
それが何か役に立ったかどうかはわかりませんが、私のnpm run build
テーマのカラーコードのエラー。カラーコード行をコメントアウトすると、エラーなしでビルドされます。
Vue.use(Vuetify, {
theme: {
"primary": "#FFCA28",
"secondary": "#1976D2",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})