Results 1 to 10 of 10

Thread: Css load order afer build

  1. #1
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goinia - GO, Brazil
    Posts
    634
    Vote Rating
    49
      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.brFrom: Goinia, GO, Brazil
    Consulting Training and Web Development

  2. #2
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goinia - GO, Brazil
    Posts
    634
    Vote Rating
    49
      1  

    Default

    Any help is appreciated. Thanks!
    Wemerson Januario
    Site/Blog: http://wemersonjanuario.com.brFrom: Goinia, GO, Brazil
    Consulting Training and Web Development

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    40
    Vote Rating
    4
      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
      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
    45
    Vote Rating
    10
      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
    20
    Vote Rating
    8
      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
    2
      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
    20
    Vote Rating
    8
      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
    2
      1  

    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
    36
    Vote Rating
    3
      0  

    Default

    Life safer! Thank you

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •