vue-cli3：配置全局sass/scss（2022/04/08：additionalData）

文章目录

需求描述

在vue中引入全局css可以直接在html页面引入.css文件，但sass/scss必须被解析成css才能真正引入到页面，因此必须在vue.config.js中配置全局的.sass/.scss文件

vue3配置全局sass/scss

根据vue-cli官网最新的关于css.loaderOptions的配置文档：

尝试了网络上许多教程没有出来，关键就是这个配置项名称：additionalData；可能当你看到时，官网文档已不再是这个字段。。如果配置无效了，请点击参考文档的第一条到官网查阅最新配置信息，一切以官网为准！

// vue.config.js
 module.exports = {css: {loaderOptions: {scss: { // 如果配置为"additionalData"无效，请到官网查阅最新配置信息additionalData: `@import "~@/assets/放在assets目录下你的.sass/.scss文件1";@import "~@/assets/放在assets目录下你的.sass/.scss文件2";`}}}
 };

其他

vue配置html网页显示的title：htmlWebpackPlugin.options.title

参考文档

[1] vue-cli：css.loaderOptions
[2] vue-cli：修改插件选项
[3] scss基础使用