vue 项目动态引入css(sass)文件（判断后加载对应的 sass 文件）

preface

最新在写后台 管理， 应 业务需求， 众多菜单业务中 有个菜单需要独立出来给领导使用，改领导有独特喜欢的颜色格调。

快速开发， 只是做了菜单的权限控制， 然后和样式 控制，通过两个域名分别访问到 “两个平台” 的 两个登录页面

问题

通过域名判断 来 确定 某些 css 文件是否加载。

首先想到的是 对 link 元素 dom 操作 加载 css 文件， 感觉有点 low

采用的 import 方式动态 加载 scss 文件

解决方案

1. 尝试 if + import 静态引入方式 项目报错

if(...) {
	import ".....";
}

2. 尝试 require 方式, 开发环境没问题，打包后有问题

因为打包后 scss样式全部打包进入 app.css 文件中，所以 样式才会有问题

if(...) {
	import ".....";
}

3. 尝试 import 动态引入方式 ，成功了(推荐)

因为 该scss 文件被单独打包成一个模块，来确定是否引入了，如下图

if(...) {
	import(".....");
}

if (global.location.hostname === liftDomain) {
    // require("@/assets/sass/smart-lift/index.scss");
    import("@/assets/sass/smart-lift/index.scss");
    // require.ensure("@/assets/sass/smart-lift/index.scss")
  }

4. require.ensure

开发环境没问题

if(...) {
  require.ensure([], function(require) {
       require("@/assets/sass/smart-lift/index.scss");
     });
}