vue3+vite集成sass

在 Vue 3 中使用 Vite 集成 Sass 预处理器的步骤如下：

1. 首先，确保你已经安装了最新版本的 Vue CLI。你可以使用以下命令进行安装：

   npm install -g @vue/cli

2. 创建一个新的 Vue 3 项目。使用以下命令：

   vue create my-project

3. 在创建项目时，选择 "Manually select features"，然后按下空格键选择 "Router" 和 "Vuex"，最后按下 Enter 键。

4. 进入到项目目录中：

   cd my-project

5. 安装 Vite 插件和相关依赖项：

   npm install vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx sass -D

6. 创建一个 `vite.config.js` 文件，并添加以下内容：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import vueJsx from '@vitejs/plugin-vue-jsx'
   import { vitePlugin as vitePluginSass } from 'vite-plugin-sass'

   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
       vueJsx(),
       vitePluginSass()
     ]
   })

7. 在 `package.json` 文件中，将 "scripts" 部分中的 "serve" 和 "build" 命令修改为：

   "scripts": {
     "serve": "vite",
     "build": "vite build"
   }

8. 创建一个 `src/styles/main.scss` 文件，并在其中编写你的 Sass 样式。

9. 在 `src/main.js` 文件中引入 `src/styles/main.scss`：

   import './styles/main.scss'

10. 运行项目：

    npm run serve

现在，你的 Vue 3 项目已经集成了 Sass 预处理器。你可以在组件中使用 Sass 的语法编写样式。

希望这些步骤对你有帮助！如果你有任何其他问题，请随时提问。