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

某只杂鱼

已于 2023-07-31 17:00:36 修改

阅读量1w

点赞数 3

分类专栏： vue 文章标签： vue sass scss

于 2022-04-18 18:46:16 首次发布

本文链接：https://blog.csdn.net/qq_36604536/article/details/124256300

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文档介绍了在Vue3中如何配置全局Sass/Scss文件。关键在于vue.config.js中的`additionalData`配置项，用于引入全局.scss文件。若配置无效，请查阅官网最新文档。示例代码展示了如何通过`additionalData`导入assets目录下的.scss文件。

摘要由CSDN通过智能技术生成

文章目录

需求描述

在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";
        `
      }
    }
  }
};