关于导入、配置Vuetify遇到的几个问题

更新时间：2023年06月05日 09:57:33 作者：元无心

这篇文章主要介绍了关于导入、配置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')

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vite中Rollup打包的实现
Rollup是一个JavaScript模块打包器,它可以将多个小的JavaScript 模块打包成一个大的模块,本文主要介绍了Vite中Rollup打包的实现,具有一定的参考价值,感兴趣的可以了解一下
2025-03-03
VUE3中watch监听使用实例详解
watch函数用来侦听特定的数据源,并在回调函数中执行副作用,下面这篇文章主要给大家介绍了关于VUE3中watch监听使用的相关资料,需要的朋友可以参考下
2022-06-06
Vue项目中input框focus时不调出键盘问题的解决
这篇文章主要介绍了Vue项目中input框focus时不调出键盘问题的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue实现折叠展开收缩动画效果
这篇文章主要介绍了vue实现折叠展开收缩动画,通过scrollHeight实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
2023-11-11
vue结合leaflet实现地图放大镜
放大镜在很多地方都可以使用的到，本文主要介绍了vue结合leaflet实现地图放大镜，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
vue引入elementUi后打开页面报错Uncaught TypeError的解决方式
这篇文章主要给大家介绍了关于vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)的解决方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-08-08
element中el-table表头通过header-row-style设置样式
有些时候需要给element-ui表头设置不同样式,本文主要介绍了element中el-table表头通过header-row-style设置样式,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
Vue.js上传图片到阿里云OSS存储的方法示例
这篇文章主要介绍了Vue.js上传图片到阿里云OSS存储的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
VueX学习之modules和namespacedVueX详细教程
这篇文章主要为大家介绍了VueX学习之modules和namespacedVueX详细教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
详解Vuex管理登录状态
这篇文章主要介绍了详解Vuex管理登录状态,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11