javascript - 更新 Vuetify 但 sass loader 不起作用

Question

我是 vuetify 新手，我正在尝试升级到 v2.1.3，但 sass 加载器不起作用。我阅读了所有文档，但我的英语不是很好，我无法解决这个问题。

实际上，我可以更新 vuetify 并且它可以工作。我可以看到新的 vuetify 并且运行其他东西，但我的项目看不到 sass。这是我的问题

我的包.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"
  ]
 }

这是我的主要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')

这是 App.vue 我在这里导入 sass 但不起作用:

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

怎么了？感谢您的帮助。

这是我的错误:

./src/App.vue?vue&type=style&index=0&lang=sass& 中出现错误

模块构建失败(来自 ./node_modules/sass-loader/dist/cjs.js): ValidationError:选项对象无效。 Sass Loader 已使用与 API 架构不匹配的选项对象进行初始化。 - 选项具有未知属性“数据”。这些属性是有效的: 对象 { 实现？， sassOptions？， prependData？， sourceMap？， webpackImporter？ }

Answer 1

根据您提供的信息很难判断，但作为 Vuetify 升级的一部分，您似乎已将 sass-loader 升级到版本 8.0.0

有一个breaking change在 8.0.0 版本的 sass-loader 中，配置应该是什么样子 - 底层 sass 处理器(Node Sass 或 Dart Sass)的所有选项现在都需要是 moved into sassOptions