vite使用sass需要怎么安装

在使用Vite开发项目时，如果需要使用Sass预处理器，你需要安装`sass`和`sass-loader`两个依赖包。可以通过以下步骤进行安装：

1. 安装`sass`和`sass-loader`依赖包。

   npm install sass sass-loader -D

2. 在`vite.config.js`文件中配置Sass预处理器。

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

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

在`css.preprocessorOptions.scss.additionalData`中引入全局变量，这里使用了`@`符号，表示引入`src`目录下的`styles`文件夹中的`variables.scss`文件。

3. 在组件中使用Sass预处理器。

   <template>
     <div class="example">
       <h1>{{ message }}</h1>
     </div>
   </template>

   <script>
   export default {
     name: 'Example',
     data() {
       return {
         message: 'Hello Vite!',
       };
     },
   };
   </script>

   <style lang="scss">
   .example {
     h1 {
       color: blue;
     }
   }
   </style>

在`<style>`标签中，将`lang`属性设置为`scss`，表示使用Sass预处理器。在样式中使用Sass的语法即可。

以上是在Vite项目中使用Sass的基本步骤，希望能对你有所帮助。