Vite+Vue项目添加sass预处理器

一:安装sass

vite有内置的sass配置信息,所以直接安装sass即可

npm install --save-dev sass

在这里插入图片描述

二:编写全局css变量/全局mixin

在assets文件夹下创建scss目录,添加globalMixin.scss和globalVar.scss文件

在这里插入图片描述

添加几个案例

//globalVar.scss
$bg-color: #1989fa;


//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;
}

三:引入

全局引入

打开项目目录下vite.config.js文件,添加配置信息

 //配置sass
  css: {
    preprocessorOptions: {
      scss: {
        // '@import "assets/scss/globalVar.scss";@import "assets/scss/globalMixin.scss";'
        additionalData: '@import "../assets/scss/globalVar.scss";@import "../assets/scss/globalMixin.scss";'
      }
    }
  },

如图

在这里插入图片描述

直接使用即可

在这里插入图片描述

按需引入

在需要使用的style里import引入即可使用

在这里插入图片描述

四:注意事项

使用sass的时候,是使用lang=scss并不是lang=sass,否则样式会失去高亮且代码报错

在这里插入图片描述
在这里插入图片描述
over~