一、sass
简介
sass提供了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，强化了css的功能，编写css更便捷，功能更强大
使用
1. 安装sass
以前用vue-cli的时候，还要安装sass-loader、node-sass什么的，安装的时候还会遇到各种问题，但是vite其实安装sass就可以了，很简单
npm install --save-dev sass
2. 编写全局css变量/全局mixin
// 全局变量 / globalVar.scss
$font-size-normal: 32px;
$bg-color: #1989fa;
// 全局mixin / globalMixin.scss
@mixin box-shadow($bulr: 20px, $color: #1989fa7a) {
-webkit-box-shadow: 0px 0px $bulr $color;
-moz-box-shadow: 0px 0px $bulr $color;
box-shadow: 0px 0px $bulr $color;
}
3.vite引入并使用
//全局引入
css: {
preprocessorOptions: {
scss: {
/**如果引入多个文件，可以使用
* '@import "@/assets/scss/globalVariable1.scss";
* @import"@/assets/scss/globalVariable2.scss";'
**/
additionalData: '@import "@/style/globalVar.scss";',
}
}
},
//按需引入并使用
<style scoped lang="scss">
@import "@/style/globalMixin.scss";
.test{
width: 650px;
height: 60px;
font-size: $font-size-normal;
background-color: $bg-color;
@include box-shadow;
}
</style>
通过以上3步就可以在vite中使用sass了
在总结中成长，快乐码代码 ( ^ _ ^)
