记一次VueCLi生成项目中引入全局Scss文件的踩坑记录

Posted 2023-03-20

参考技术A 在前端开发项目中， sass 是一个很好的编写样式的预处理工具，但是集成到 VueCli 中以后坑还是很多的。如果想要在项目入口文件 main.js 中引入，然后可以全局使用，会报各种各样的错。下面就记录一下自己的踩坑经历吧。

但是，报错了！！！ element-ui 也抛出警告！

好吧，那怎么办？只能翻 VueCli 官方文档了~~~

good! 文档有介绍耶！✌

so, 配置一下咯！

在 vue.config.js 文件中增加如下配置：

这下应该可以了吧！！！'

But, 又报新的错了！

WTF!!!😡😡😡

咦~~~~报错提示配置不对 ❓

不会呀，文档不写着吗？可是就是报错了！！！ 😔

Google一下吧....

好像有人遇到！把配置改成 additionalData 改成 prependData ❓

我去！居然可以了！这是什么鬼？官方文档没更新❓

but, element-ui 的警告还在，强迫症！不能忍啊！！！😢

继续Google......

咦，有人说是 sass 版本问题！改到固定版本！

丢！ 真的可以了!广发😂😘

最爱这个清爽的界面了！唉😘❤🌹💋

but一脸懵逼~~~😢

=============================================分割线==============================================
后续来了~~~~

多读了即便官方文档，发现是自己看漏了，文档有写 sass-loader v8 中，这个选项名是 prependData ,是我自己看漏了！

但是 sass 版本问题，还是要改到固定版本的哟！！！

逃了~~~~🤣😜