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