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的配置文档:
vue-cli3:配置全局sass/scss(2022/04/08:additionalData)_第1张图片
尝试了网络上许多教程没有出来,关键就是这个配置项名称: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基础使用

你可能感兴趣的:(vue,vue,sass,scss)