更新 Vuetify 但 sass 加载器不起作用

Question

I am new to vuetify and I am trying upgrade to v2.1.3 but sass loader doesn't work. I read all the documentation but my English is not very good, I can't fix this problem.

Actually, I can update vuetify and it works. I can see the new vuetify and I run other things but my Project doesn't see sass. This is my problem

My package .json;

 {
 "name": "arkmanweb",
 "version": "1.9.4",
 "private": true,
 "scripts": {
 "serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@syncfusion/ej2-vue-grids": "^17.3.19",
"axios": "^0.18.0",
"css-loader": "^3.2.1",
"echarts": "^4.2.0-rc.2",
"luxon": "^1.19.3",
"print-js": "^1.0.52",
"quill": "^1.3.6",
"register-service-worker": "^1.0.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
"save": "^2.3.2",
"underscore": "^1.8.3",
"vee-validate": "^2.0.4",
"vue": "^2.5.13",
"vue-i18n": "^8.4.0",
"vue-moment": "^3.2.0",
"vue-router": "^3.0.1",
"vuetify": "^2.1.13",
"vuex": "^3.0.1",
"webpack": "^4.41.2",
   },
  "devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-alpha.8",
"@vue/cli-plugin-eslint": "^3.0.0-alpha.8",
"@vue/cli-plugin-pwa": "^3.0.0-alpha.8",
"@vue/cli-service": "^3.0.0-alpha.8",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"less-loader": "4.1.0",
"style-loader": "0.23.1",
"vue-template-compiler": "^2.5.13",
"webpack-cli": "^3.1.2"
   },
 "babel": {
 "presets": [
  "@vue/app"
  ]
  },
 "eslintConfig": {
  "extends": [
    "plugin:vue/essential",
   "eslint:recommended"
  ]
   },
"postcss": {
  "plugins": {
  "autoprefixer": {}
 }
 },
 "browserslist": [
 "> 1%",
 "last 2 versions",
 "not ie <= 8"
  ]
 }

This is my main js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'  
import store from './store'
import Vuetify from 'vuetify'
import './registerServiceWorker'
import VueResource from 'vue-resource'
import '../src/assets/css/custom.css'
import { i18n } from '@/plugins/i18n'
import 'vuetify/dist/vuetify.min.css'
Vue.use(VueResource)


 const opts = {
  theme: { disable: true }
  }
 Vue.use(Vuetify)

  import auth from '../src/api/auth'


 auth.checkAuth()

 Vue.router = router
 Vue.config.productionTip = false

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

This is App.vue I am importing sass here but doesn't work:

<style lang="sass">
@import '../node_modules/vuetify/src/styles/main.sass';
 </style>

What's wrong? Thank you for your help.

This is my error:

error in ./src/App.vue?vue&type=style&index=0&lang=sass&

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 'data'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

Answer 1

Its hard to tell based on information you provided but it seems you upgraded sass-loader to version 8.0.0 as part of the upgrade of Vuetify

There is a breaking change in 8.0.0 release of sass-loader in how the configuration should look like - all the options for the underlying sass processor (Node Sass or Dart Sass) needs now to be moved into sassOptions