Question

我是vuetify的新手，正在尝试升级到v2.1.3，但是sass loader无法正常工作。我阅读了所有文档，但是英语不是很好，我无法解决此问题。

实际上，我可以更新vuetify，它可以工作。我可以看到新的vuetify，并且可以执行其他操作，但是我的Project没有看到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

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

在sass-loader的8.0.0版本中有一个breaking change，其配置应如下所示-基础sass处理器（节点Sass或Dart Sass）的所有选项现在都必须{ {3}}

更新Vuetify，但无法使用sass loader

1 个答案: