Vue2组件经Rollup打包适配Vue3后样式类不生效问题求助

• 检查样式打包与引入配置
  确认Rollup配置中是否正确处理了Vue组件的样式。使用rollup-plugin-vue时，需开启CSS提取，确保组件样式被打包到独立文件中：

  import vue from 'rollup-plugin-vue';
  export default {
    plugins: [
      vue({
        css: true,
        compileTemplate: true
      })
    ]
  };
  

  同时在Vue3项目中，确保完整引入设计系统的全局样式文件，比如在入口文件添加：import 'your-design-system/dist/style.css'。

• 验证组件class透传逻辑
  检查BIMDataCheckbox和BIMDataRadio组件是否正确接收并绑定外部传入的class：

  • 若组件使用Vue2选项式语法，确认inheritAttrs为true（默认值），且根元素绑定了$attrs.class：

    <template>
      <input type="checkbox" :class="[$attrs.class]" />
    </template>
    

  • 若组件迁移到Vue3的<script setup>，需通过useAttrs()获取外部属性并绑定：

    <script setup>
    import { useAttrs } from 'vue';
    const attrs = useAttrs();
    </script>
    <template>
      <input type="checkbox" :class="attrs.class" />
    </template>
    

• 替换Vue2专属的样式选择器
  设计系统若使用了Vue2的>>>深度选择器，在Vue3中需替换为:deep()或::v-deep()，否则样式无法穿透到子组件：

  /* 原Vue2写法 */
  .file-card__content__header__btn-menu__checkbox >>> .inner-box {
    /* 样式 */
  }
  /* Vue3兼容写法 */
  :deep(.file-card__content__header__btn-menu__checkbox .inner-box) {
    /* 样式 */
  }
  

• 排查代码压缩导致的class丢失
  若Rollup开启了代码压缩，检查压缩配置是否误删了class名称。比如使用terser时，需确保keep_classnames或keep_fnames配置为true，避免自定义class被混淆移除。

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