关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题

在vite项目中，有时候我们需要全局引入css变量、scss变量，或者引入全局scss样式文件，vite提供了以下这种配置方式

这种写法没有任何问题，并且我已经在一些项目中实践过了，可有一次我创建新项目的时候却无效了，在浏览器上也没有看到任何相关的样式，但是在main.js中引入又是正常的

我先是排查写法和路径是否有问题，然后排查sass或者vite的版本是否有问题，排查几个小时下来发现都没有问题，纳闷不已，唯一能确定的是vite的问题

于是我就想，也许别人也碰到过这种问题，当我找遍各大博客网站都没答案后（一大堆妥协说直接在main.js引入就好的），我准备去Vite仓库提各Issue

当我尝试查一下有没有类似的Issue时，发现竟然有好几个类似的Issue，还是关闭状态，难道这个问题已经解决了？我一个一个点开看，终于在其中一个Issue中找到了答案

#issue5682

原来这不是一个bug，只有在main.js引入一个其他scss文件或者在.vue文件中使用<style lang="scss"><style>，并且里面有内容，则 scss.additionalData 配置的全局scss文件就可以正确引入了，还建议我们在 scss.additionalData 引入的文件最好只写scss变量，别写css变量，因为css变量是运行时属性

至此，这个问题算是圆满解决了

最近我开源了一个Vite+Vue3+NaiveUI+Pinia的轻量级后台管理模板，非常适用于中小型项目或者个人项目，感兴趣的可以看下，欢迎参与开源、star、fork

文章：

Vite+Vue3+NaiveUI+Pinia搭建一套优雅的后台管理模板，真香 - 掘金 (juejin.cn)

预览：

template.qszone.com

源码：

github:(https://github.com/zclzone/vue-naive-admin)

gitee:(https://gitee.com/zclzone/vue-naive-admin)

命令如下:

concurrently --kill-others "npm run watch-js" "npm run watch-less"

如果其中一个命令die,那么其他命令自动die

cssnano:执行各种优化,删除空白和注释,压缩代码

gulp:构建管理工具

gulp-ext-replace:利用gulp可以改变文件扩展名

gulp-imagemin:压缩jpeg,png,gif和svg图片

gulp-postcss:利用之前的autoprefixer和cssnano等多个预处理器同时处理css文件,而且只需一次

gulp-sass:在gulp中编译scss文件

gulp-sourcemaps:在编译sass文件时会生成对应的map文件,当你在调试的时候就可以看到哪些div样式对应哪些sass代码

gulp-typescript-babel:将typescript代码编译成ES2015,然后将ES2015编译成ES5代码

gulp-uglify:压缩js文件

lite-server:轻量的node服务器

postcss:通过js插件将转化css代码

postcss-scss:将scss代码修饰成更加接近css代码

precss:允许你在你的css中使用类似sass的标记,例如变量,运算等等

---