VueJS 3单文件组件中如何用v-bind实现@import动态导入SCSS

你之前尝试的两种方法都有局限：

• 直接在<style>里用v-bind配合@import不被支持，因为Vue的样式编译是构建时完成的，而v-bind是运行时动态值，无法结合。
• 在mounted里用require导入的样式属于全局样式，不会被Scoped机制添加组件专属的data-v-xxx属性，因此不受Scoped作用域限制。

下面是几种可行的解决方案：

方案一：SCSS混合宏+动态类名 #

把移动端/桌面端样式封装成SCSS混合宏，通过组件的动态类名来切换生效：

1. 改造SCSS文件，将内容封装为mixin：

// stylist-mobile.scss
@mixin mobile-styles {
  // 原移动端样式内容
}

// stylist-desktop.scss
@mixin desktop-styles {
  // 原桌面端样式内容
}

2. 在SFC中导入mixin，结合动态类名应用：

<template>
  <div :class="{ 'is-mobile': ISMOBILE, 'is-desktop': !ISMOBILE }">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      ISMOBILE: false // 根据实际逻辑赋值，比如监听窗口大小
    }
  }
}
</script>

<style lang="scss" scoped>
@import "/src/css/stylist.scss";
@import "/src/css/stylist-mobile.scss";
@import "/src/css/stylist-desktop.scss";

.is-mobile {
  @include mobile-styles;
}

.is-desktop {
  @include desktop-styles;
}
</style>

这种方式下所有样式都会被Scoped处理，动态切换类名即可生效。

方案二：动态渲染带Scoped样式的子组件 #

将不同端的样式拆分到独立子组件中，父组件根据状态动态加载：

1. 创建两个子组件：

<!-- StylistMobile.vue -->
<template>
  <div class="stylist-wrap">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
@import "/src/css/stylist.scss";
@import "/src/css/stylist-mobile.scss";
</style>

<!-- StylistDesktop.vue -->
<template>
  <div class="stylist-wrap">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
@import "/src/css/stylist.scss";
@import "/src/css/stylist-desktop.scss";
</style>

2. 父组件动态导入并切换子组件：

<template>
  <component :is="currentStylist">
    <!-- 原组件内容 -->
  </component>
</template>

<script>
export default {
  data() {
    return {
      ISMOBILE: false
    }
  },
  computed: {
    currentStylist() {
      return this.ISMOBILE 
        ? () => import('./StylistMobile.vue') 
        : () => import('./StylistDesktop.vue')
    }
  }
}
</script>

每个子组件的样式都是Scoped的，切换组件时对应样式会自动生效，作用域完全符合需求。

方案三：手动给动态导入样式添加Scoped属性（hack方案） #

如果不想拆分组件，可以手动给动态导入的样式规则添加组件的Scoped属性：

<template>
  <div ref="rootEl">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      ISMOBILE: false
    }
  },
  mounted() {
    const scopeId = this.$options._scopeId; // 获取组件的Scoped属性，格式如data-v-xxxxxx
    const stylePath = this.ISMOBILE ? "/src/css/stylist-mobile.scss" : "/src/css/stylist-desktop.scss";

    import(stylePath).then(() => {
      // 遍历所有样式表，给导入的样式规则添加Scoped属性
      Array.from(document.styleSheets).forEach(sheet => {
        try {
          Array.from(sheet.cssRules).forEach(rule => {
            if (rule.selectorText) {
              rule.selectorText = rule.selectorText.split(',')
                .map(sel => `${sel.trim()}[${scopeId}]`)
                .join(',');
            }
          });
        } catch (e) {
          // 跨域样式表无法访问，忽略
        }
      });
    });
  }
}
</script>

<style lang="scss" scoped>
@import "/src/css/stylist.scss";
</style>

注意：这种方法兼容性一般，若样式表包含复杂选择器或嵌套规则可能出现问题，优先推荐前两种方案。

内容的提问来源于stack exchange，提问作者Fu March