1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    93
    Vote Rating
    2
    tm8747a is on a distinguished road

      0  

    Default How do you include custom CSS files in your build?

    How do you include custom CSS files in your build?


    I'm massively confused about how to handle CSS when doing build with Sench Cmd. I found the following thread which I thought my solve my problem, but I guess maybe the app.json config might only apply to Sencha Touch (I'm working with Ext JS 4.2):
    http://www.sencha.com/forum/showthre...-sencha-cmd-v3

    So at this point, I have no idea how to get my custom CSS included in the "all" CSS file generated by the build. Here's what my index.html file looks like:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>MyApp</title>
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <link rel="stylesheet" href="bootstrap.css">
                <script src="ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <link rel="stylesheet" href="vendor/extjs/examples/ux/css/ItemSelector.css" />
            <link rel="stylesheet" href="vendor/extjs/examples/ux/BoxSelect/src/BoxSelect.css" />
            <link rel="stylesheet" href="resources/css/VerticalTabPanel.css" />
            <link rel="stylesheet" href="resources/css/app.css" />
    
            <script src="app.js"></script>
        <!-- </x-compile> -->
    </head>
    <body></body>
    </html>
    So as you can see, I have a number of CSS files that I'm including, but the resulting MyApp-all.css file doesn't include any of the styles in those. Another thing I'm struggling to understand is the bootstrap.css file. It seems like once you do a build it points to the "MyApp-all.css" file that the build generated. Wouldn't that mean that you kind of need to be doing builds for your dev site to work? Doesn't seem to make sense, I would think you'd include ext-all-debug.css in dev or something along those lines and it would compile all the CSS you need for prod when doing the build.

    Any help on this would be appreciated.

  2. #2
    Sencha Premium Member varsos's Avatar
    Join Date
    Feb 2008
    Location
    Long Island, NY
    Posts
    342
    Vote Rating
    16
    varsos will become famous soon enough

      0  
    varsos

  3. #3
    Sencha User
    Join Date
    Sep 2007
    Posts
    93
    Vote Rating
    2
    tm8747a is on a distinguished road

      0  

    Default


    Quote Originally Posted by varsos View Post
    Thanks for the link. I ended up doing things differently because I just found it to be simpler. Basically, I just customized the build.xml file and made it concatenate and compress the additional CSS files I needed and merge them into the MyApp-all.css file. Works well for me and if you're even remotely familiar with Ant it's really easy to do.

  4. #4
    Sencha User
    Join Date
    Oct 2013
    Posts
    1
    Vote Rating
    0
    jsonsocool is on a distinguished road

      0  

    Default


    can you tell me how you fix your problem in detail? thanks!

Thread Participants: 2

Tags for this Thread