vue项⽬动态引⼊css（sass）⽂件（判断后加载对应的sass⽂件）vue 项⽬动态引⼊css⽂件
preface
最新在写后台 管理， 应 业务需求， 众多菜单业务中 有个菜单需要独⽴出来给领导使⽤，改领导有独特喜欢的颜⾊格调。
快速开发， 只是做了菜单的权限控制， 然后和样式 控制，通过两个域名分别访问到 “两个平台” 的 两个登录页⾯
问题
通过域名判断 来 确定 某些 css ⽂件是否加载。
⾸先想到的是 对 link 元素 dom 操作 加载 css ⽂件， 感觉有点 low
采⽤的 import ⽅式动态 加载 scss ⽂件
解决⽅案
1. 尝试 if + import 静态引⼊⽅式 项⽬报错
if(...){
import".....";
}
2. 尝试 require ⽅式, 开发环境没问题，打包后有问题
因为打包后 scss样式全部打包进⼊ app.css ⽂件中，所以 样式才会有问题
if(...){
import".....";
}
css最新3. 尝试 import 动态引⼊⽅式 ，成功了(推荐)
因为 该scss ⽂件被单独打包成⼀个模块，来确定是否引⼊了，如下图
if(...){
import(".....");
}
if(global.location.hostname === liftDomain){
// require("@/assets/sass/smart-lift/index.scss");
import("@/assets/sass/smart-lift/index.scss");
// sure("@/assets/sass/smart-lift/index.scss")
}
4. sure
开发环境没问题
if(...){
require("@/assets/sass/smart-lift/index.scss");
});
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。