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

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>

全局样式变量使用成功：