vite vue3 ts 使用sass 设置样式变量 和重置默认样式
1.安装scss 样式支持依赖
yarn add -D sass2.使用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>全局样式变量使用成功：