【Vuetify】TS 配置 Vuetify 时 SASS 编译失败

最近点子好多，正好也刚从忙得暗无天日的生活中恢复过来，于是决定启用 TypeScript + Vuetify 的计划写几个 Web APP

为了以后方（偷）便（懒），当然要先做好一个模板~

然而，被一个巨无聊的 BUG 坑了好几个小时...科学上网都用上了，找了好久才找到问题所在 TAT

首先，你必须安装 vue-cli 3

1. 通过 vue-cli 初始化项目（推荐在命令行输入 vue ui 使用图形界面创建）

选择手动配置，配置以下几项

• Babel
• TypeScript
• Router
• Vuex
• CSS Pre-processors
• Linter / Formatter

其中 CSS Pre-processors 选择 scss with node-sass，Linter / Formatter 选择 tslint

2. 在项目根目录下打开命令行，执行 vue add vuetify

选项全部按照默认即可

vuetify 会自动帮你在 main.ts 中引入并修改 App.vue 等

但此时！如果尝试执行 npm run serve 会发生如下错误：

Could not find a declaration file for module 'vuetify/lib'

这个好办，你只要在 tsconfig.json 中加入这一行代码即可：

"types": [
      "webpack-env",
      "vuetify"  // 加入对 vuetify 的声明
    ]

但是，此时你以为你解决掉了所有问题，然而还是会弹出一堆报错：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was ...

网上对于这个问题的解决方案千奇百怪，百花齐放，百家争鸣......dbq 跑题了

然而根本的解决方法其实非常简单：不能够使用 node-sass 而要使用 sass

所以，你只需要进入 package.json，删除 node-sass 的开发依赖

"devDependencies": {
    "node-sass": (版本号),  // 删除！
    "sass": (版本号)
}

然后执行 npm install 重新安装依赖，就可以 npm run serve 成功运行了！

坑了我好久好久啊呜呜呜

我宝贵的启动时间啊！！！