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