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

文章目录

Sass是什么？

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

为什么使用Sass?

Sass让编写可维护的CSSS更加简易方便。可以用更少的代码，做更多的事，用更少的时间，具有更强的可读性。

安装sass

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

1、安装sass

npm install sass -D
1

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;
}
1
2
3
4
5
6
7
8
9
10
11

3、vite引入并使用

//全局引入
css: {
    preprocessorOptions: {
      scss: {
        /**如果引入多个文件，可以使用
       * '@import "@/assets/scss/globalVariable1.scss";
       * @import"@/assets/scss/globalVariable2.scss";'
      **/
        additionalData: '@import "@/style/globalVar.scss";',
      }
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12