如何在Vite搭建的Vue 2.8项目中设置TypeScript与SCSS为组件默认语言

1. 安装SCSS依赖（若未安装） #

先确保项目已搭载SCSS预处理器，执行对应命令：

npm install sass --save-dev
# 或用 yarn
yarn add sass -D
# 或用 pnpm
pnpm add sass -D

2. 修改Vite配置文件 #

在项目根目录的vite.config.ts（或.js）中，配置@vitejs/plugin-vue2的选项，设定默认脚本与样式语言：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [
    vue({
      // 将TypeScript设为默认脚本语言
      script: {
        defaultLang: 'ts'
      },
      // 将SCSS设为默认样式语言，同时默认开启scoped
      style: {
        defaultLang: 'scss',
        scoped: true
      }
    })
  ]
})

3. 组件内简化写法 #

配置生效后，组件无需再显式声明lang="ts"和lang="scss"，直接编写即可：

• 脚本部分：

<script>
// 此处默认被识别为TypeScript
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class MyComponent extends Vue {
  // TS业务代码
}
</script>

• 样式部分：

<style>
/* 此处默认被识别为SCSS，且自动启用scoped */
.container {
  .item {
    color: #333;
  }
}
</style>

注意事项 #

• 确保项目已正确配置TypeScript环境（存在tsconfig.json，并根据你的TS使用方式安装了vue-property-decorator、@vue/composition-api等必要依赖）。
• 若不需要默认开启scoped，删除style配置中的scoped: true即可。

内容的提问来源于stack exchange，提问作者Tom Smykowski