vite创建vue3项目配置scss

要在vite创建的Vue3项目中配置SCSS，你需要进行以下步骤：

1. 首先，安装依赖包，运行以下命令：

   npm install sass sass-loader --save-dev

2. 在项目根目录下创建一个`vite.config.js`文件，并添加以下配置代码：

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

   export default defineConfig({
     plugins: [
       vue({
         include: [/\.vue$/, /\.md$/],
       }),
       createVuePlugin({
         include: [/\.vue$/, /\.md$/],
       }),
     ],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, 'src'),
       },
     },
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: `@import "@/styles/variables.scss";`, // 你的全局 SCSS 文件路径
         },
       },
     },
   })

3. 在你的项目中创建一个名为`variables.scss`的全局 SCSS 文件，并在其中定义你的 SCSS 变量。

4. 现在，你可以在你的组件或样式文件中使用 SCSS，并且会自动应用全局的 SCSS 变量。