Vue.js中如何根据User Agent动态导入不同SCSS文件

既然你已经搞定了User Agent解析的逻辑，只需要把判断结果和SCSS的条件导入结合起来，就能实现动态内联CSS啦。这里给你两种实用方案，根据你的Vue版本选择就行：

方案一：Vue3 + SCSS条件导入（推荐） #

这种方案利用Vue3支持在样式中绑定JS变量的特性，直接在scoped样式里动态导入对应文件，样式还能保持组件隔离：

<script setup>
// 替换成你已有的UA解析逻辑，示例用了基础的正则判断
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
</script>

<template>
  <h1>Hello Big font</h1>
</template>

<style lang="scss" scoped>
// 将JS变量注入为SCSS可用的变量
$isMobile: v-bind(isMobile);

// 根据移动端标识动态导入样式文件
@if $isMobile {
  @import '../styles/mobile_sample.scss';
} @else {
  @import '../styles/sample.scss';
}
</style>

步骤说明： #

• 先在script setup里完成UA解析，得到isMobile布尔变量；
• 通过v-bind(isMobile)把JS变量转为SCSS能识别的变量；
• 用SCSS的@if条件判断，自动导入对应的样式文件；
• 整个样式保持scoped特性，不会污染全局样式。

方案二：动态脚本导入样式（兼容Vue2/3） #

如果你的项目是Vue2，或者不想依赖SCSS的条件语法，可以直接在脚本里根据条件动态导入样式：

<script>
export default {
  created() {
    // 替换成你已有的UA解析逻辑
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    // 动态导入对应样式文件
    if (isMobile) {
      import('../styles/mobile_sample.scss');
    } else {
      import('../styles/sample.scss');
    }
  }
}
</script>

<template>
  <h1>Hello Big font</h1>
</template>

<style lang="scss" scoped>
// 这里可以写组件专属的基础样式
</style>

注意点： #

• 这种方式导入的样式是全局的，如果需要组件隔离效果，建议给组件根元素加个专属class，然后在SCSS文件里把所有样式嵌套在这个class下。

两种方案都能满足你的需求，根据项目实际情况选就好～

内容的提问来源于stack exchange，提问作者Abhay Kumar