1. #1
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    529
    Vote Rating
    26
    wemerson.januario will become famous soon enough wemerson.januario will become famous soon enough

      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
    Website: http://wemersonjanuario.com.br
    Twitter: https://twitter.com/januariocoder

    Email: wemerson.januario@gmail.com

    From: Goiânia, Brazil
    Ext JS Consulting, Training, Support

  2. #2
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    529
    Vote Rating
    26
    wemerson.januario will become famous soon enough wemerson.januario will become famous soon enough

      1  

    Default

    Any help is appreciated. Thanks!
    Wemerson Januario
    Website: http://wemersonjanuario.com.br
    Twitter: https://twitter.com/januariocoder

    Email: wemerson.januario@gmail.com

    From: Goiânia, Brazil
    Ext JS Consulting, Training, Support

  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.