Open lin52025iq opened 9 months ago
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} 这一行样式。
.demo{width:120px;height:32px}
其他 1: 包含的 el-link 的样式是 el-link 的所有默认样式,这会导致修改 element-plus 的变量调整的样式被覆盖。
如描述
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
npm
因为你使用了按需引入,所以这个行为是正常行为,他会看你文件中使用了哪些组件,自动在该文件引入组件和对应样式
按需导入会匹配对应组件名称引入对应组件代码和样式代码,具体看完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
那有什么办法全局覆盖ElementPlus的样式吗
Components({ resolvers: [ElementPlusResolver({ importStyle: false })], dts: true }),
Describe the bug
vue.config.js
index.vue
package.json
打包后得到的 css 文件 71.f2768c5f.css
打包后的文件中包含了 el-link 的样式,但期望的应该只包含
.demo{width:120px;height:32px}
这一行样式。其他 1: 包含的 el-link 的样式是 el-link 的所有默认样式,这会导致修改 element-plus 的变量调整的样式被覆盖。
Reproduction
如描述
System Info
Used Package Manager
npm
Validations