Vue3单文件组件动态类注入：未引用样式不打包问题求助

我尝试通过props向Vue3组件注入类名，同时希望保留组件内定义的样式类。但问题在于，由于这些类未被“直接引用”，打包时不会被包含在内。

示例组件代码：

<script setup lang="ts">    
    const {className} = defineProps<{className: string;}>();    
</script>
<template>
    <div :class="className">Hello</div>
</template>
<style lang="scss" scoped>
    .some-class {
        color: pink;
    }
</style>

上述代码中，.some-class因未被模板直接引用，打包时会被剔除。

项目使用Webpack5搭配vue-style-loader构建，Webpack配置如下：

module: {
    rules: [
        { test: /\.css$/, use: ["vue-style-loader", "css-loader"] },
        {
            test: /\.scss$/,
            use: [
                "vue-style-loader",
                "css-loader",
                {
                    loader: "sass-loader",
                    options: {
                        additionalData: `@import "scss/_variables.scss";`
                    }
                }
            ]
        }
    ]
}

方法1：模板中显式关联类名 #

在模板的class绑定里，将组件内样式类与props类名一起声明，让打包工具检测到引用：

<template>
    <div :class="[className, 'some-class']">Hello</div>
</template>

如果不需要默认应用该类，仅需保留样式，可通过条件绑定实现（条件设为false，确保类不生效但被打包）：

<template>
    <div :class="[className, { 'some-class': false }]">Hello</div>
</template>

方法2：添加Webpack保留注释 #

在样式块顶部添加注释，告知Webpack不要移除该样式：

<style lang="scss" scoped>
/* webpackIgnore: true */
.some-class {
    color: pink;
}
</style>

也可调整css-loader配置，比如关闭modules或修改exportOnlyLocals选项，但这种方式可能影响全局样式优化，需谨慎操作。

方法3：JS代码中显式引用类名 #

在<script setup>中定义包含类名的变量，让打包工具识别到该类的存在：

<script setup lang="ts">    
    const {className} = defineProps<{className: string;}>();
    // 显式声明类名，触发打包包含对应样式
    const _keepSomeClass = 'some-class';
</script>

此方式无需修改模板，仅通过JS代码中的字符串引用即可保留样式。

方法4：禁用样式树摇优化 #

若项目不需要样式树摇功能，可在Webpack配置中调整CSS相关优化选项。比如修改css-loader的配置，或在CSS压缩工具（如css-minimizer-webpack-plugin）中禁用未使用样式的移除逻辑。

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