We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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 的变量调整的样式被覆盖。 2. 如果使用 el-input、el-button 时不会被引入额外的 el-input 的样式,但对 el-link、 el-radio、el-table 会被额外的引入样式。
如描述
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
The text was updated successfully, but these errors were encountered:
因为你使用了按需引入,所以这个行为是正常行为,他会看你文件中使用了哪些组件,自动在该文件引入组件和对应样式
Sorry, something went wrong.
按需导入会匹配对应组件名称引入对应组件代码和样式代码,具体看完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 }),
No branches or pull requests
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 的变量调整的样式被覆盖。
2. 如果使用 el-input、el-button 时不会被引入额外的 el-input 的样式,但对 el-link、 el-radio、el-table 会被额外的引入样式。
Reproduction
如描述
System Info
Used Package Manager
npm
Validations
The text was updated successfully, but these errors were encountered: