【ElementPlusResolver】打包代码后组件对应的css文件中出现了使用了 element-plus 组件的样式

[lin52025iq]

Describe the bug

vue.config.js

module.exports = defineConfig({
    ...
    configureWebpack: {
        ...
        plugins: [
            ...
            UnpluginVueComponent({
                dts: true,
                types: [
                    {
                        from: 'vue-router',
                        names: ['RouterLink', 'RouterView']
                    }
                ],
                resolvers: [ElementPlusResolver()]
            })
        ]
    }
})

index.vue

<template>
    <div class="demo">
        <el-link type="success">click link!</el-link>
    </div>
</template>

<style>
.demo {
    width: 120px;
    height: 32px;
}
</style>

package.json

{
    ...
    "dependencies": {
        ...
        "element-plus": "^2.3.14",
        "vue": "^3.3.4"
    },
    "devDependencies": {
        ....
        "@vue/cli-service": "^5.0.8",
        "typescript": "^5.2.2",
        "unplugin-element-plus": "^0.8.0",
        "unplugin-vue-components": "^0.25.2"
    }
}

打包后得到的 css 文件 71.f2768c5f.css

.el-link{--el-link-font-size:var(--el-font-size-base);--el-link-font-weight:var(--el-font-weight-primary);--el-link-text-color:var(--el-text-color-regular);--el-link-hover-text-color:var(--el-color-primary);--el-link-disabled-text-color:var(--el-text-color-placeholder);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;position:relative;text-decoration:none;outline:0;cursor:pointer;padding:0;font-size:var(--el-link-font-size);font-weight:var(--el-link-font-weight);color:var(--el-link-text-color)}.el-link:hover{color:var(--el-link-hover-text-color)}.el-link.is-underline:hover:after{content:"";position:absolute;left:0;right:0;height:0;bottom:0;border-bottom:1px solid var(--el-link-hover-text-color)}.el-link.is-disabled{color:var(--el-link-disabled-text-color);cursor:not-allowed}.el-link [class*=el-icon-]+span{margin-left:5px}.el-link.el-link--default:after{border-color:var(--el-link-hover-text-color)}.el-link__inner{display:inline-flex;justify-content:center;align-items:center}.el-link.el-link--primary{--el-link-text-color:var(--el-color-primary);--el-link-hover-text-color:var(--el-color-primary-light-3);--el-link-disabled-text-color:var(--el-color-primary-light-5)}.el-link.el-link--primary.is-underline:hover:after,.el-link.el-link--primary:after{border-color:var(--el-link-text-color)}.el-link.el-link--success{--el-link-text-color:var(--el-color-success);--el-link-hover-text-color:var(--el-color-success-light-3);--el-link-disabled-text-color:var(--el-color-success-light-5)}.el-link.el-link--success.is-underline:hover:after,.el-link.el-link--success:after{border-color:var(--el-link-text-color)}.el-link.el-link--warning{--el-link-text-color:var(--el-color-warning);--el-link-hover-text-color:var(--el-color-warning-light-3);--el-link-disabled-text-color:var(--el-color-warning-light-5)}.el-link.el-link--warning.is-underline:hover:after,.el-link.el-link--warning:after{border-color:var(--el-link-text-color)}.el-link.el-link--danger{--el-link-text-color:var(--el-color-danger);--el-link-hover-text-color:var(--el-color-danger-light-3);--el-link-disabled-text-color:var(--el-color-danger-light-5)}.el-link.el-link--danger.is-underline:hover:after,.el-link.el-link--danger:after{border-color:var(--el-link-text-color)}.el-link.el-link--error{--el-link-text-color:var(--el-color-error);--el-link-hover-text-color:var(--el-color-error-light-3);--el-link-disabled-text-color:var(--el-color-error-light-5)}.el-link.el-link--error.is-underline:hover:after,.el-link.el-link--error:after{border-color:var(--el-link-text-color)}.el-link.el-link--info{--el-link-text-color:var(--el-color-info);--el-link-hover-text-color:var(--el-color-info-light-3);--el-link-disabled-text-color:var(--el-color-info-light-5)}.el-link.el-link--info.is-underline:hover:after,.el-link.el-link--info:after{border-color:var(--el-link-text-color)}.demo{width:120px;height:32px}

打包后的文件中包含了 el-link 的样式，但期望的应该只包含 .demo{width:120px;height:32px} 这一行样式。

其他 1: 包含的 el-link 的样式是 el-link 的所有默认样式，这会导致修改 element-plus 的变量调整的样式被覆盖。 2. 如果使用 el-input、el-button 时不会被引入额外的 el-input 的样式，但对 el-link、 el-radio、el-table 会被额外的引入样式。

Reproduction

如描述

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 1.85 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.110
    Safari: 17.0

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[lishaobos]

因为你使用了按需引入，所以这个行为是正常行为，他会看你文件中使用了哪些组件，自动在该文件引入组件和对应样式

[loocus]

按需导入会匹配对应组件名称引入对应组件代码和样式代码，具体看完resolver就明白了 https://github.com/unplugin/unplugin-vue-components/blob/main/src/core/resolvers/element-plus.ts#L95 https://github.com/unplugin/unplugin-vue-components/blob/main/src/core/resolvers/element-plus.ts#L78

[foxii-cn]

那有什么办法全局覆盖ElementPlus的样式吗

[Gardent]

Components({ resolvers: [ElementPlusResolver({ importStyle: false })], dts: true }),