vite vue3 ts 使用sass 设置样式变量 和重置默认样式

1.安装scss 样式支持依赖

yarn add -D sass

2.使用sass

        
        
测试使用sass

效果：

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.使用全局样式变量

全局样式变量使用成功：