Open Closed

Theme Issues In Production / During Publish #198


User avatar
1
ididsbury created

Hi,

I have recently published my app to azure as a test. I noticed a few strange things with the theme / css.

  1. I've replaced the Theme footer as per the below.

This works fine in development. However, in production the footer has not been replaced and that it has defaulted to:

Why is the footer not being replaced in the production environment?

  1. In development environement (and since version 2.8), the change history modal does not include the change time information on the item header. See below:

However in production, the change time information is correctly displayed as below:

Why is causing the different beaviour?

  1. I've made some minor modifications to the new lepton1.css in terms of colour of the side bar (I've made the colour of the side bar the same as lepton5.css). I've replaced the lepton css with my new custom css using the following method:

This works perfectly however I ran into some issues with the minification / bundling logic:

Volo.Abp.Minify.NUglify.NUglifyException: There are some errors on uglifying the given source code! Original file: /styles/ipams-global-styles.css __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(688,26): run-time error CSS1063: Expected calculation unit, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(688,26): run-time error CSS1064: Expected calculation product, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(688,26): run-time error CSS1065: Expected calculation sum, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(688,26): run-time error CSS1034: Expected closing parenthesis, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(688,26): run-time error CSS1042: Expected function, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(688,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(692,25): run-time error CSS1063: Expected calculation unit, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(692,25): run-time error CSS1064: Expected calculation product, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(692,25): run-time error CSS1065: Expected calculation sum, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(692,25): run-time error CSS1034: Expected closing parenthesis, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(692,25): run-time error CSS1042: Expected function, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(692,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(696,28): run-time error CSS1063: Expected calculation unit, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(696,28): run-time error CSS1064: Expected calculation product, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(696,28): run-time error CSS1065: Expected calculation sum, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(696,28): run-time error CSS1034: Expected closing parenthesis, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(696,28): run-time error CSS1042: Expected function, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(696,28): run-time error CSS1062: Expected semicolon or closing curly-brace, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(700,25): run-time error CSS1063: Expected calculation unit, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(700,25): run-time error CSS1064: Expected calculation product, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(700,25): run-time error CSS1065: Expected calculation sum, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(700,25): run-time error CSS1034: Expected closing parenthesis, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(700,25): run-time error CSS1042: Expected function, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(700,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(704,25): run-time error CSS1063: Expected calculation unit, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(704,25): run-time error CSS1064: Expected calculation product, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(704,25): run-time error CSS1065: Expected calculation sum, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(704,25): run-time error CSS1034: Expected closing parenthesis, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(704,25): run-time error CSS1042: Expected function, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(704,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2048,38): run-time error CSS1063: Expected calculation unit, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2048,38): run-time error CSS1064: Expected calculation product, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2048,38): run-time error CSS1065: Expected calculation sum, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2048,38): run-time error CSS1034: Expected closing parenthesis, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2048,38): run-time error CSS1042: Expected function, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2048,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2049,39): run-time error CSS1063: Expected calculation unit, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2049,39): run-time error CSS1064: Expected calculation product, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2049,39): run-time error CSS1065: Expected calculation sum, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2049,39): run-time error CSS1034: Expected closing parenthesis, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2049,39): run-time error CSS1042: Expected function, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2049,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found '$' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2106,23): run-time error CSS1036: Expected expression, found '!important' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2142,12): run-time error CSS1036: Expected expression, found '!important' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2178,19): run-time error CSS1036: Expected expression, found '!important' __bundles/Lepton.Global.8C224654427E9D7DCEF14A3E74A5BB4E.css(2214,23): run-time error CSS1036: Expected expression, found '!important'

I have crudly addressed the above by commenting out each line and the bundling logic then works fine. Note that above line numbers exactly align with lepton1.css (I copied this css as the basis for my custom css). If the css is exactly the same, why are these errors generated in my custom css but not if I use the lepton1.css? Is it because the lepton1.css has already been pre-minified and somehow the issues are addressedas part of a minification process outside of the abp framework?

Appreciate any help.

Thanks

Ian

  • ABP Framework version: v2.8.0
  • UI type: MVC
  • Tiered (MVC) or Identity Server Seperated (Angular): no

5 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi, Please see https://github.com/abpframework/abp/issues/3766.

  • User Avatar
    0
    ididsbury created

    Hi,

    I assume you are referencing the github issue in terms of item 1 only. The virtual file system seems to be setup correctly. See below:

    Note that this was auto generated as part of the start-up template and hasn't been changed. I've tried commenting out the above and I can't replicate the issue with the footer override in development i.e. only an issue in production. Any ideas?

    Also, can you please advise on tiems 2 and 3 (assuming these are related to different issues).

    Thanks

    Ian

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    I will try reproduce your problem and can you provide the ipams-global-styles.css content?

  • User Avatar
    0
    ididsbury created

    Hi,

    Thanks. See attached.

    ipams-global-styles.css

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi

    question 1:

    You need to set files property in the Theme folder to embedded files, This is a template error, we will fix it in the next version.

    Add :

    question 2

    ~~I see the change time information is removed in version 2.8, So you can't see, you should clean up the publish directory and re-publish~~. I can't reproduce this problem,you should clean up the publish directory and re-publish

    question 3

    I can't reproduce this problem, But you can place mini.css in the styles folder to fix this problem.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11