1.安装scss 样式支持依赖

yarn add -D sass

2.使用sass

<div>
        <!-- 测试使用sass -->
        <h1>测试使用sass</h1>
</div>


<style scope lang="scss">
div {
    h1 {
        color: red;
    }
}
</style>

效果：

3.通过npm下载并复制清除样式代码，并在assets/css/reset.scss中粘贴

4.新建assets//css/index.scss全局样式文件，引入reset.scss文件， 然后在main.ts中全局引入

// index.scss
// 引入清除默认样式文件
@import "./reset.scss"

清除默认样式成功：

5.配置全局样式变量，新建assets/css/global.scss文件，存储整个项目需要的样式变量

// 本文件配置的是sass全局变量，需要在vite.config.ts中引入,变量使用$开头
$base-color: #2803f7;

6.在vite.config.ts中配置全局样式变量

// 配置样式sass 全局变量
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/assets/css/global.scss";',
      },
    },
  },

7.使用全局样式变量

<style scope lang="scss">
div {
    h1 {
        color: $base-color;
    }
}
</style>

全局样式变量使用成功：