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");
});
}