1. #1
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    587
    Vote Rating
    36
    wemerson.januario has a spectacular aura about wemerson.januario has a spectacular aura about wemerson.januario has a spectacular aura about

      1  

    Default Css load order afer build

    I have a problem with css load order. In my build app.json manifest file, I have a custom css file that should be loaded after bootstrap.css, but Sencha cmd insist to put it before bootstrap.css while building production

    Code:
    "css": [
            {
            "path": "bootstrap.css",
                    "bootstrap": true
            },
            {
            "path": "resources/css/app.css",
                    "bootstrap": false,
                    "remote" : true
            }
            ],
    In dev mode works ok, but when built, the css load order is inverted, the bootstrap.css is loaded after my custom resources/css/app.css file

    * Sencha CMD 5.0.0.160
    * Windows

    I could see some codes in .sencha/app/Boot.js about loadOrder but did not understant how to solve!



    Please help me!
    Wemerson Januario
    Site/Blog: http://wemersonjanuario.com.br
    Twitter: @januariocoder
    From: Goiânia, GO, Brazil
    Ext JS developer consulting and training

  2. #2
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    587
    Vote Rating
    36
    wemerson.januario has a spectacular aura about wemerson.januario has a spectacular aura about wemerson.januario has a spectacular aura about

      1  

    Default

    Any help is appreciated. Thanks!
    Wemerson Januario
    Site/Blog: http://wemersonjanuario.com.br
    Twitter: @januariocoder
    From: Goiânia, GO, Brazil
    Ext JS developer consulting and training

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    40
    Vote Rating
    4
    JasonMO is on a distinguished road

      1  

    Default

    Also having the same problem. Seems pretty fundamental to order CSS files. What's required to do this? CSS resources really should be always loaded after the main app css. Doesn't seem to be the case. Bug?

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2014
    Posts
    1
    Vote Rating
    1
    MarkusSchneider is on a distinguished road

      1  

    Default

    Hi,

    I am having the exact same issue. Any solution for you already available?

    Thanks,
    Markus

  5. #5
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    44
    Vote Rating
    10
    jonw will become famous soon enough

      1  

    Default

    I am also having this issue. Is there any plan to resolve this?

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    19
    Vote Rating
    7
    Solovyevk will become famous soon enough

      0  

    Default

    Same problem, is there a way to change css order, so my custom css loaded after generated {app.name}-all.css

  7. #7
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    11
    Vote Rating
    0
    Rotterdam is on a distinguished road

      0  

    Default

    Same problem here. Any solution available? Currently I'm manually modifying the generated app.json which shouldn't be needed imo.

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    19
    Vote Rating
    7
    Solovyevk will become famous soon enough

      2  

    Default

    I change order with ant build.xml:
    Code:
      <target name="-after-page">
    
    
        <!--Fix css order as generated first and ems.css last-->
        <replace file="${app.output.manifest}" token="${app.name}-all.css" value="css/ems.swap_css"/>
        <replace file="${app.output.manifest}" token="css/ems.css" value="${app.name}-all.css"/>
        <replace file="${app.output.manifest}" token="css/ems.swap_css" value="css/ems.css"/
    
    
      </target>

  9. #9
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    11
    Vote Rating
    0
    Rotterdam is on a distinguished road

      0  

    Default

    Quote Originally Posted by Solovyevk View Post
    I change order with ant build.xml:
    Code:
      <target name="-after-page">
    
    
        <!--Fix css order as generated first and ems.css last-->
        <replace file="${app.output.manifest}" token="${app.name}-all.css" value="css/ems.swap_css"/>
        <replace file="${app.output.manifest}" token="css/ems.css" value="${app.name}-all.css"/>
        <replace file="${app.output.manifest}" token="css/ems.swap_css" value="css/ems.css"/
    
    
      </target>
    Good idea, thanks!

    I now use the following code in build.xml to reorder the CSS:

    Code:
        <target name="-after-page">
            <!--
            Reorder CSS loading in generated app.json
            Load generated first, custom last
            -->
            <replace file="${build.dir}/${app.output.manifest}" token="${app.name}-all.css"  value="css/custom.swap_css"/>
            <replace file="${build.dir}/${app.output.manifest}" token="css/custom.css"       value="${app.name}-all.css"/>
            <replace file="${build.dir}/${app.output.manifest}" token="css/custom.swap_css"  value="css/custom.css"/>
    
        </target>
    I had to add ${build.dir} to ensure the build manifest file was modified.

  10. #10
    Sencha Premium Member tlloyduk's Avatar
    Join Date
    Sep 2010
    Posts
    29
    Vote Rating
    2
    tlloyduk is on a distinguished road

      0  

    Default

    Life safer! Thank you