导入、配置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的类型声明。