vue3中安装并使用CSS预处理器Sass的方法介绍

Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的语法和特性,例如变量、嵌套、混合、继承和颜色功能等,这些特性可以帮助开发者更高效地管理和维护样式表。Sass语法是基于缩进(缩进花括号)的,它与传统的CSS语法类似,但添加了一些额外的规则和语法结构。Sass代码需要编译成CSS代码才能在浏览器中呈现。

1. 安装sass

以前用vue-cli的时候,还要安装sass-loader、node-sass什么的,安装的时候还会遇到各种问题,但是vite其实安装sass就可以了,很简单

复制代码
npm install sass -D

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";',
      }
    }
  },

4.按需引入并使用

复制代码
<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;
}
相关推荐
很多石头2 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
华仔啊4 小时前
关于移动端100vh的坑和终极解决方案,看这一篇就够了!
前端·css
拜无忧1 天前
完美圆角,渐变边框,兼容chrome 60,两层背景的视觉差
前端·css
jingling5551 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
luckyzlb1 天前
02- html && css
前端·css·html
你的电影很有趣1 天前
lesson55:CSS导航组件全攻略:从基础导航条到动态三级菜单与伸缩菜单实现
前端·css
蔗理苦1 天前
2025-09-05 CSS4——浮动与定位
开发语言·前端·css·html·css3
slim~2 天前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
F2E_Zhangmo2 天前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
蔗理苦2 天前
2025-09-05 CSS3——盒子模型
前端·css·css3