木灵鱼儿

木灵鱼儿

阅读:1474

最后更新:2021/07/22/ 14:50:15

vue cli4 全局scss变量技巧

今天啃了下官方文档,加上之前也配置到webpack的,有一些经验,我觉得官方可能有对应的方式,毕竟在webpack中我们只需要在sass-loader配置中就可以加入全局scss了,都不用安装啥插件。

于是乎,果然,官方有,但是文档很蛋疼,你能看懂引入单个全局,没有多个全局的示例,索性自己写个笔记了。

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `
          @import "~@/base/assets/scss/global.scss";
          @import "~@/base/assets/scss/reset.scss";
        `
      }
    }
  }
}

prependData这键名不同版本的sass-loader还不一样,注意下:

  • sass-loader <= 8; 键名是:data
  • sass-loader = 8;键名是:prependData
  • sass-loader >= 10;键名是:additionalData

好家伙!!!

prependData除了像上述这种字符格式外,还可以使用函数,具体自便查询:文档

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 1
文章被阅读 1474

相关文章

目录树