vite安装sass和使用

要在Vite项目中使用Sass，需要安装两个依赖项：sass和sass-loader。可以使用以下命令来安装它们：

npm install sass sass-loader

安装完成后，在Vite项目的配置文件（vite.config.js）中添加以下代码：

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

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      sass: {
        // 在这里添加自己需要的选项
      }
    }
  }
})

在sass选项中可以添加Sass的选项，例如：

sass: {
  // 在这里添加自己需要的选项
  additionalData: `@import "@/styles/variables.scss";`
}

这里的additionalData选项可以用来添加全局Sass变量和混合器等。最后，在Vue组件中使用Sass即可：

<template>
  <div class="my-component">
    <h1>{{ message }}</h1>
  </div>
</template>

<style lang="scss">
.my-component {
  background-color: $primary-color;
}
</style>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

这样就可以在Vite项目中使用Sass了。