关于导入、配置Vuetify遇到的几个问题
作者：元无心
这篇文章主要介绍了关于导入、配置Vuetify遇到的几个问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
导入、配置Vuetify遇到的几个问题
1.Semicolons aren’t allowed in the indented syntax
从2.0开始，Vuetify支持了SASS/SCSS。
使用的时候需要在vue.config.js里配置loader。
而且我还想同时使用scss文件，按照官网的配置方法，应该这么配置：
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "~@/sass/main.scss"`,
},
},
},
chainWebpack: config => {
["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
config.module.rule('scss').oneOf(match).use('sass-loader')
.tap(opt => Object.assign(opt, { data: `@import '~@/sass/main.scss';` }))
})
}
}但是有一点需要注意，在上面的CSS配置里，import语句的结尾是没有分号的，而下面的chainWebpack里是有分号的。
如果在CSS配置里不小心加上分号就会一直报错，无法通过编译，而且还提示是Vuetify本身出了问题……用的时候一定要注意。
2.TS7106: Could not find a declaration file for module ‘vuetify/lib’
与这个问题一起出现的是Vuetify无法在main里引入，而且过不了编译。
这个是TypeScript声明文件的问题，具体原因可以看之前写的关于ts声明文件的东西。
解决方案很简单，在tsconfig.json里加上vuetify即可：
"types": [
"webpack-env",
"vuetify"
]这样才能让ts获得vuetify的类型声明。
vue引入vuetify报错“Error: Vuetify is not properly initialized”
刚刚添加vuetify的时候（2.0.16），会报错
Error: Vuetify is not properly initialized
需要在main.js中配置
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.config.productionTip = false
Vue.use(Vuetify)
// vuetify 自定义配置
export default new Vuetify({})
new Vue({
router,
store,
vuetify: new Vuetify(),
render: h => h(App)
}).$mount('#app')总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。