1. #1
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    558
    Vote Rating
    27
    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
    Blog: http://wemersonjanuario.com.br
    Twitter: @januariocoder
    From: Goiânia, GO, Brazil
    Ext JS developer and consulting

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

      1  

    Default

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

  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
    42
    Vote Rating
    8
    jonw is on a distinguished road

      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
    6
    Solovyevk is on a distinguished road

      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
    8
    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
    6
    Solovyevk is on a distinguished road

      0  

    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
    8
    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.