使用Webpack 5模块联合服务样式和资产
使用Webpack 5模块联合服务样式和资产
提问于 2021-05-21 08:31:42
我已经成功地实现了比较新的webpack 5模块联邦系统在我的角11应用程序，所以它可以远程加载模块从另一个建设。
有一件事我没有发现，那就是如何处理像样式表和图像这样的资产。例如，联邦模块中有一个菜单元素，它需要自己的样式：
- 将它们放入组件的样式表中会使块臃肿，编译器也会抱怨这一点，另外，在显示菜单之前不会加载它们，如果样式位于联邦模块的全局样式表上，则它们根本不会加载，因为我请求的是一个子模块，而不是主模块(我推测)
- 样式是联邦模块特有的，因此不能放在加载程序应用程序
中。
我认为可以编译这些样式，并将其放入联邦模块的构建资产中，但这会在联合和不联合使用时中断链接。
我还在试验这个，但我觉得最好还是问问。有人有这个问题吗？
回答 2
Stack Overflow用户
发布于 2021-09-18 06:54:34
好吧，我会把我想出来的东西贴出来，这并不好看，但对于CSS资产来说，它似乎很好用。
首先，我在远程模块的构建中将它们分开: angular.json：
"styles": [
"projects/xxx-admin/src/styles/styles.scss",
"projects/xxx-admin/src/styles/admin.scss",
{
"input": "projects/xxx-admin/src/styles/admin.scss",
"bundleName": "admin_module_styles",
"inject": false
}
],这将生成一个具有明确的非自动生成名称的CSS。然后，我们从路由中的应用程序中加载联邦模块：
{
path: "admin",
component: AdminPanelComponent,
canActivate: [XxxAdminGuard],
loadChildren: () => {
const baseUrl = getAdminFrontendBaseUrl();
return loadAdminStyles().then(
() => loadRemoteModule({
remoteName: "xxx_admin",
remoteEntry: `${baseUrl}/remoteEntry.js`,
exposedModule: "AdminModule",
}).then((m) => m.AdminModule));
},
},
...
export function loadAdminStyles(): Promise<void> {
return new Promise((resolve => {
const baseUrl = getAdminFrontendBaseUrl();
const el = document.getElementById("admin-module-styles");
// Load one instance, do it like this to handle errors and retrying
if (el) {
el.remove();
}
const headEl = document.getElementsByTagName("head")[0];
const styleLinkEl = document.createElement("link");
styleLinkEl.rel = "stylesheet";
styleLinkEl.id = "admin-module-styles";
styleLinkEl.href = `${baseUrl}/admin_module_styles.css`;
headEl.appendChild(styleLinkEl);
resolve();
}));
}不太理想，但我想不出比这更好的了。
Stack Overflow用户
发布于 2022-06-15 13:47:42
在微观方面，将资产转移到资产/mfe_name。您可以从父主机进行代理，名为microfront。
主办单位：
"/assets/*mfe_name*/*": {
"target": "*mfe_host*",
"secure": true,
"changeOrigin": true
},开始: ng serve --proxyConfig=proxy
这样，您就可以从本地主机和prod从远程主机访问文件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67633345
复制相关文章
相似问题
腾讯云开发者
