Hi,
I have a layered blazor wasm solution and have implemented bundling in the new was as described in the following link https://abp.io/community/articles/abp-global-assets-new-way-to-bundle-javascriptcss-files-in-blazor-webassembly-app-i0nu10rs#gsc.tab=0
Since doing this none of my icons in the menu or on any buttons display. Below is the log from my blazor container and I can see the fontawesome and bootstrap icons css files are being bundled correctly. Is there something else I should be checking?
[12:43:44 INF] Bundling __bundles/BlazorWebAssembly.Global.AF4DD7383108129CF8360DD6A0E7C166.css (22 files) [12:43:45 INF] > Minified _content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/css/all.css (148801 bytes -> 105148 bytes) [12:43:45 INF] > Minified _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/css/abp.css (1342 bytes -> 878 bytes) [12:43:45 INF] > Minified _content/Volo.Abp.BlazoriseUI/volo.abp.blazoriseui.css (1274 bytes -> 939 bytes) [12:43:45 INF] > Minified _content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/libs/bootstrap-icons/font/bootstrap-icons.css (74827 bytes -> 57858 bytes) [12:43:45 INF] > Minified _content/DevExpress.Blazor.Dashboard/dx-analytics.common.css (102301 bytes -> 90434 bytes) [12:43:45 INF] > Minified _content/DevExpress.Blazor.Dashboard/dx-querybuilder.css (76926 bytes -> 69960 bytes) [12:43:45 INF] > Minified _content/DevExpress.Blazor.Dashboard/ace.css (28733 bytes -> 24467 bytes) [12:43:45 INF] > Minified _content/DevExpress.Blazor.Dashboard/ace-theme-dreamweaver.css (3207 bytes -> 2566 bytes) [12:43:45 INF] > Minified _content/DevExpress.Blazor.Dashboard/ace-theme-ambiance.css (3929 bytes -> 3265 bytes) [12:43:45 INF] > Minified _content/DevExpress.Blazor.Dashboard/dx.light.css (649674 bytes -> 647385 bytes) [12:43:45 INF] > Minified _content/DevExpress.Blazor.Dashboard/dx-analytics.light.css (8566 bytes -> 7116 bytes) [12:43:45 INF] > Minified main.css (1261 bytes -> 842 bytes) [12:43:45 INF] > Minified cfd-styles.css (3296 bytes -> 2348 bytes) [12:43:45 INF] Bundled __bundles/BlazorWebAssembly.Global.AF4DD7383108129CF8360DD6A0E7C166.css (4590069 bytes) [12:43:45 INF] Bundling __bundles/BlazorWebAssembly.Global.EEB4B2EC0740665348BF3607CED7FACD.js (10 files) [12:43:45 INF] > Minified _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/abp.js (8553 bytes -> 3582 bytes) [12:43:45 INF] > Minified _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/lang-utils.js (676 bytes -> 371 bytes) [12:43:45 INF] > Minified _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/authentication-state-listener.js (453 bytes -> 234 bytes) [12:43:45 INF] > Minified _content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/scripts/global.js (798 bytes -> 269 bytes) [12:43:45 INF] > Minified _content/Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXTheme/scripts/leptonx-blazor-compatibility.js (5107 bytes -> 2285 bytes) [12:43:45 INF] Bundled __bundles/BlazorWebAssembly.Global.EEB4B2EC0740665348BF3607CED7FACD.js (579899 bytes)
35 Answer(s)
-
0
I've already provided you with our code that reproduces the missing icon issue.
-
0
How can I see the Font Awesome problem via https://github.com/spospisil/ABP_Issue project? Please share the steps.
I'm unable to reproduce it with your https://github.com/spospisil/StructureCloudTest project.
Thanks.
-
0
[maliming] said: How can I see the Font Awesome problem via https://github.com/spospisil/ABP_Issue project? Please share the steps.
I'm unable to reproduce it with your https://github.com/spospisil/StructureCloudTest project.
Thanks.
Maliming,
That ticket is another issue all together, but I believe if you solve that ticket it will also fix this ticket as well.
-
0
Once the application is built and starts. You can't modify
appsettings.json. This is theMapStaticAssetsdesign.If you want to do that, you can use the code below.
context.SetEndpoint(null);andapp.UseStaticFilesForPatterns("appsettings*.*");will make appsettings.json as static file. So you can change it at runtime.
-
0
[maliming] said: Once the application is built and starts. You can't modify
appsettings.json. This is theMapStaticAssetsdesign.If you want to do that, you can use the code below.
context.SetEndpoint(null);andapp.UseStaticFilesForPatterns("appsettings*.*");will make appsettings.json as static file. So you can change it at runtime.Yes, we have already discussed this. The core issue is that the url links in the global.css file for Volo.Abp.AspNetCore.Components.WebAssembly.Theming/* for some reason do not prefix with the value in 'UsePathBase'. I've gotten around this for the moment by adding the following to my css file that gets bundled with the global.css file.
I think there is a bug in ABP's code that is not changing the font awesome and bootstrap icons file links taking into account the value in UsePathBase, because all the other css file links other than these work correctly.
@font-face { font-family: 'Font Awesome 6 Free'; font-style: normal; font-weight: 900; font-display: block; src: url("../Blazor/_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),url("../Blazor/_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/webfonts/fa-solid-900.ttf") format("truetype") }
@font-face { font-family: 'Font Awesome 5 Free'; font-display: block; font-weight: 900; src: url("../Blazor/_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),url("../Blazor/_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/webfonts/fa-solid-900.ttf") format("truetype") }
@font-face { font-family: 'FontAwesome'; font-display: block; src: url("../Blazor/_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),url("../Blazor/_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/webfonts/fa-solid-900.ttf") format("truetype") }
@font-face { font-family: "bootstrap-icons"; src: url("../Blazor/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/libs/bootstrap-icons/font/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d") format("woff2"),url("../Blazor/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/libs/bootstrap-icons/font/fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d") format("woff") }
-
0
hi
-
0
This is not correct. The href tag in my code is already /blazor/
-
0
If you could share the online link to your website, I'd be happy to take a look.
-
0
Sadly I cannot because we are not in production with it. But if you bundle css the new way you describe with global assets I’m sure you’ll be able to reproduce the problem you’ll see the problem.
-
0
I can't reproduce it.
If you can reproduce it in TestWasm project, you can share steps.
Thanks
