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

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>

怎么了？谢谢你的帮助。

这是我的错误：

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

模块构建失败(来自./node_modules/sass-loader/dist/cjs.js(： 验证错误： 无效的选项对象。Sass 加载程序已使用与 API 架构不匹配的选项对象进行初始化。 - 选项具有未知属性"数据"。这些属性有效： object { implementation？， sassOptions？， prependData？， sourceMap？， webpackImporter？ }

Answer 1

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

在 8.0.0 版本的sass-loader配置外观方面有一个重大变化 - 底层 sass 处理器(Node Sass 或 Dart Sass(的所有选项现在都需要移动到sassOptions