tiny-engine
tiny-engine copied to clipboard
opentiny
🐛 [Bug]: 将element plus组件保存为区块，在页面拖入该区块物料时，样式没有生效
Environment
mac
Version
16
Version
latest
Link to minimal reproduction
无
Step to reproduce
区块的assets里的style有element plus的css文件，拖入物料时页面也加载了该css文件，但样式没有生效
What is expected
怎样才能使element plus区块样式生效
What is actually happening
No response
What is your project name
无
Any additional comments (optional)
No response
Bot detected the issue body's language is not English, translate it automatically.
Title: 🐛 [Bug]: Save the element plus component as a block. When dragging the block material into the page, the style does not take effect.
当前描述不清晰，是开发区块时，使用了物料里的element-plus组件，但是区块里该组件样式不正确，还是直接把element-plus当做本地区块导入？请提供具体能够复现的片段代码以及步骤 @youchen133
Bot detected the issue body's language is not English, translate it automatically.
The current description is not clear. When developing the block, the element-plus component in the material was used, but the style of the component in the block was incorrect. Or should element-plus be imported directly as a local block? Please provide specific code snippets and steps that can be reproduced @youchen133
当前描述不清晰，是开发区块时，使用了物料里的element-plus组件，但是区块里该组件样式不正确，还是直接把element-plus当做本地区块导入？请提供具体能够复现的片段代码以及步骤 @youchen133
是开发区块的时候使用了element plus物料组件，并且发布了这个区块，然后在页面拖入这个区块后，这个区块中的element plus组件没有样式
Bot detected the issue body's language is not English, translate it automatically.
The current description is not clear. When developing the block, the element-plus component in the material was used, but the style of the component in the block is incorrect. Or should element-plus be imported directly as a local block? Please provide specific code snippets and steps that can be reproduced @youchen133
When developing the block, the element plus material component was used and the block was published. Then after dragging the block into the page, the element plus component in the block had no style.
当前区块编译物料跟 TinyVue 绑定在一起（官方后续会出方案解耦）。 如果需要编译 Element Plus 的区块。可以将 blockToWebcomponent 进行改造。
主要点如下：
- 将 vite.config.js 46行 样式链接替换成 element plus 的全局样式链接。
- package.json 中，添加 Element Plus 的相关依赖。
- vite.config.js 中，external 和 global 添加 ElementPlus ，即不打包 ElemenPlus（这步应该可选，主要是为了减少区块打包体积）
@youchen133
Bot detected the issue body's language is not English, translate it automatically.
The current block compilation materials are bound to TinyVue (the official plan will be decoupled in the future). If you need to compile the Element Plus block. blockToWebcomponent can be transformed.
The main points are as follows:
- Replace vite.config.js line 46 style link with the global element plus Style link.
- In package.json, add Element Plus related dependencies.
- In vite.config.js, add ElementPlus to external and global, that is, do not package ElementPlus (this step should be optional, mainly to reduce the block packaging volume)
@youchen133