vue3+vite scss安装使用

对于Vue 3和Vite项目，你可以按照以下步骤安装和使用SCSS：

1. 创建新的Vue项目：
使用Vue CLI创建新的Vue项目，确保你已经安装了Vue CLI。打开终端并运行以下命令：

   vue create my-vue-project

按照提示选择配置选项并等待项目创建完成。

2. 进入项目目录：
打开终端，进入你的项目目录：

   cd my-vue-project

3. 安装Vite：
由于你想使用Vite作为开发服务器，需要在项目中安装Vite。运行以下命令进行安装：

   npm install --save-dev create-vite

4. 初始化Vite配置：
运行以下命令初始化Vite配置文件：

   npx create-vite

根据提示选择配置选项并等待配置文件生成。

5. 安装SCSS支持：
运行以下命令安装SCSS支持的相关依赖：

   npm install --save-dev sass

6. 配置Vite以使用SCSS：
在项目根目录下找到 `vite.config.js` 文件，并添加以下内容：

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

   export default defineConfig({
     plugins: [
       vue(),
     ],
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: `@import "@/styles/variables.scss";`,
         },
       },
     },
   })

7. 创建SCSS文件：
在你的项目中创建一个 `styles` 目录，在该目录下创建一个 `variables.scss` 文件，用于存放你的SCSS变量和样式。

8. 在组件中使用SCSS：
在你的Vue组件中，可以直接导入和使用SCSS文件。例如，在你的组件中添加以下代码：

   <style lang="scss">
   @import "@/styles/variables.scss";

   .my-component {
     color: $primary-color;
   }
   </style>

现在你已经成功安装并配置了Vue 3和Vite项目中的SCSS。你可以开始在你的项目中使用SCSS编写样式了！