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

最新推荐文章于 2025-09-11 15:18:57 发布

原创最新推荐文章于 2025-09-11 15:18:57 发布 · 2.5w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue动态引入css

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在Vue项目中动态加载CSS文件的方法，解决了根据不同条件加载特定样式的需求。通过对比link元素DOM操作、require和import静态引入等方式，最终推荐使用import动态引入方式，确保了开发效率和代码整洁。

vue 项目动态引入css文件

preface

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

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

问题

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

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

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

解决方案

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

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

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