vue-multiselect开发环境样式正常生产环境不生效如何解决

• 开发环境npm run dev不会执行严格的CSS压缩、无用样式剔除逻辑，<style src>引入的第三方样式可以正常加载；生产打包时会触发全量CSS优化流程，这种引入方式的资源容易被过滤
• 若项目接入了purgecss等CSS瘦身工具，vue-multiselect的内置类名未被识别为已使用样式，会被直接从产物中删除
• 部分版本的vue-loader对<style src>引入的node_modules路径下的CSS资源，生产环境不会纳入打包范围

方案1（优先推荐，兼容性最强） #

将样式引入从style标签移到script模块内，打包器会统一处理引入的样式资源，不会被异常过滤。修改后代码如下：

<template>
    <multi-select :id="id" v-model="value" :options="options" :multiple="multiple" :max="max"></multi-select>
</template>

<script>
    import multiSelect from 'vue-multiselect';
    // 新增样式引入
    import 'vue-multiselect/dist/vue-multiselect.min.css';
    export default {
        name: "my-multi-select",
        components: { multiSelect },
    }
</script>
<!-- 删掉原有<style src="xxx"></style>代码 -->

如果项目多处使用该组件，也可以直接在项目入口文件main.js/main.ts中全局引入该样式。

方案2（保留原有style引入写法） #

调整构建配置：

• 在CSS清理工具的白名单中加入vue-multiselect的类名规则，例如purgecss配置新增：

safelist: [/^multiselect-/]

• 检查vue-loader配置，确保未将node_modules路径下的CSS资源排除在style标签解析规则之外

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