alibaba
demo项目中出码会丢失样式
Describe the bug (required) / 详细描述 bug（必填）
A clear and concise description of what the bug is. / 请提供清晰且精确的 bug 描述
demo项目中出码会丢失样式
To Reproduce (required) / 如何复现 bug？（必填，非常重要）
Steps to reproduce the behavior: / 详细复现步骤：
English version example：
- 打开https://lowcode-engine.cn/demo/demo-general/index.html
- 点击出码
- 下载导出的zip包
- 本地npm install
- 正常打开http://localhost:3333/#/ 但会丢失样式
中文版示例：
- open https://lowcode-engine.cn/demo/demo-general/index.html
- Click to output the code
- Download the exported zip package
- Local npm install
- Normal opening http://localhost:3333/#/ But the style will be lost
Expected behavior (required) / 预期行为（必填，非常重要）
A clear and concise description of what did you expect to happen. / 请清晰和精确的描述你预期的行为
希望 可以正常显示样式 得到跟官网demo中一样的效果
Screenshots (optional) / bug 截图（可选）
Sceenshots for further information. (If applicable.) / 一些有用的截图将会帮助我们更好的明确以及定位问题
Environments (please complete the following information) (required): / 请提供如下信息（必填）
- AliLowCodeEngine version: [e.g. 1.0.0] / 低代码引擎版本
- AliLowCodeEngineExt version: [e.g. 1.0.0] / 低代码引擎扩展包版本
- Browser [e.g. chrome, safari] / 浏览器版本
- materials / plugins / tools / 其他物料 / 插件 / 工具链版本
(this information can be collected via the manual plugin / 版本信息可通过低代码用户手册插件收集)
Additional context (optional) / 更多额外信息（可选）
Any other context of the problem here. / 可以追加更多的额外信息，帮助定位问题
我也遇到相同的问题，从昨天晚上开始到现在我终于把项目跑起来，出码并看到了界面，但是样式不见了这是什么问题。
而且我发现官网上提供的几个示例我基本上都运行不起来，包括官网自己的demo程序也是需要且调整依赖库的版本，直接下载根本就运行不了，这样给使用者带来极大的麻烦。
demo的程序出码后竟然还有代码上的bug导致我折腾了好久才解决
我是想用这套引擎做我们的自定义报表服务，但是感觉通过官网的例子想把程序跑起来太痛苦了，这套引擎挺有意义的希望咱们可以投入更多的精力放在用户的引导工作上，这样才能把这么好的技术推动起来，拜托了...
暂时解决方案
通过定制一个 solution，加上以下插件来补充 style~
import CodeGen, {
FileType,
BuilderComponentPluginFactory,
BuilderComponentPlugin,
ICodeStruct,
IWithDependency,
ChunkType,
} from '@alilc/lowcode-code-generator';
const { COMMON_CHUNK_NAME } = CodeGen.constants;
const pluginFactory: BuilderComponentPluginFactory<unknown> = (config?: unknown) => {
const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
const next: ICodeStruct = {
...pre,
};
const ir = next.ir as IWithDependency;
const chunks = next.chunks;
if (ir && ir.deps && ir.deps.length > 0) {
let lowcodeMaterialsStyleAdded = false;
ir.deps.forEach((dep: any) => {
if (dep.package === '@alifd/next') {
chunks.push({
type: ChunkType.STRING,
fileType: FileType.JSX,
name: COMMON_CHUNK_NAME.InternalDepsImport,
content: `import '@alifd/next/lib/${dep.exportName.toLowerCase()}/style';`,
linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
});
} else if (dep.package === '@alilc/lowcode-materials' && !lowcodeMaterialsStyleAdded) {
chunks.push({
type: ChunkType.STRING,
fileType: FileType.JSX,
name: COMMON_CHUNK_NAME.InternalDepsImport,
content: 'import \'@alilc/lowcode-materials/lib/style\';',
linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
});
lowcodeMaterialsStyleAdded = true;
}
});
}
return next;
};
return plugin;
};
export default pluginFactory;
长期解决方案
组件分为 css in js 和 分开写 两种，对于第一种样式天然已经处理了，对于第二种：
在搭建协议中 componentsMap 字段增加 styleMain 入口，设计引擎兼容处理，出码引擎兼容处理~
demo的程序出码后竟然还有代码上的bug导致我折腾了好久才解决
我是想用这套引擎做我们的自定义报表服务，但是感觉通过官网的例子想把程序跑起来太痛苦了，这套引擎挺有意义的希望咱们可以投入更多的精力放在用户的引导工作上，这样才能把这么好的技术推动起来，拜托了...
请问您发现的bug具体是什么呢？谢谢！
