Vue3+Vite中使用SCSS

在Vue 3 + Vite项目中使用SCSS，首先确保你已经安装了相关的依赖。如果没有，可以通过以下命令安装：

npm install -D sass

然后，你可以在Vue组件中这样使用SCSS：

1. 创建一个.scss文件，例如MyComponent.scss，并写入你的SCSS样式：

/* MyComponent.scss */
.my-component {
  color: blue;
  font-size: 16px;
 
  h1 {
    font-weight: bold;
  }
}

2. 在Vue组件中引入这个SCSS文件，并在<style>标签中指定lang="scss"：

<template>
  <div class="my-component">
    <h1>Hello, SCSS!</h1>
  </div>
</template>
 
<script>
export default {
  name: 'MyComponent'
  // ...
}
</script>
 
<style lang="scss">
@import './MyComponent.scss';
</style>

确保你的Vite配置文件（vite.config.js或vite.config.ts）支持SCSS：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./path/to/variables.scss";`
      }
    }
  }
})

这样，你就可以在Vue 3 + Vite项目中使用SCSS了。