How to create custom SASS in ExtJS for compiling with Sencha CMD

Question

I have my application built with ExtJS 4.2.1

My app structure was generated using Sencha Cmd v4.0.1.45.

Im using some custom CSS in my app to give personalized style so my XTemplate items and also Im using AwesomeFont and FamFam Sprites for icons.

This is my resources directory in my app sencha cmd structure:

enter image description here

App.css is a custom CSS
BoxSelect.css is other custom CSS
chooser.css is other custom CSS
famfamfam.css is the CSS that will handle the famfam.png image sprite
font.css is the CSS that comes with AwesomeFont.

The application in development mode (without building) works great, but when I tried to build using Sencha CMD and then try to open the production Index.html I couldn't see any icon neither the styles applied from my custom CSS's files.

So what I ended up was to modify my app Index.html in order to move all my CSS references outside the tag.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Application</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> -->


     <!-- Ext Scheduler -->
     <script src="lib/js/sch-all-debug.js"></script>

    <script src="../Scripts/jquery-2.1.1.min.js"></script>
    <script src="../Scripts/jquery.vegas.min.js"></script>
    <script src="../Scripts/jquery.signalR-2.0.3.min.js"></script>

     <!-- Ext Scheduler -->
    <link rel="stylesheet" href="resources/css/sch-all-neptune.css">

    <link rel="stylesheet" href="../Content/jquery.vegas.min.css">

    <script src="app/Constants.js"></script>
    <script src="app/Glyphs.js"></script>
    <script src="app.js"></script>

    <!-- </x-compile> -->

    <link rel="stylesheet" href="resources/css/app.css">
    <link rel="stylesheet" href="resources/css/boxselect.css">
    <link rel="stylesheet" href="resources/css/fonts.css">
    <link rel="stylesheet" href="resources/css/famfamfam.css">
    <!-- view icons chooser style -->
    <link rel="stylesheet" href="resources/css/chooser.css">


</head>
<body></body>
</html>

Doing this way worked fine but I would like to create a SASS so my custom CSS's files can be minified.

Any clue on what are the steps that I have to follow in order to create my SASS for my custom CSS's so when doing sencha app build production my CSS are minified?

Appreciate any help.

Alex Tokarev · Accepted Answer · 2014-09-12 16:59:32Z

1

In your application folder, there should be sass folder. Move your CSS stylesheets to sass/etc/ and rename to *.scss, then run sencha app build. This should do the trick.

One caveat: I recall there was a bug in Cmd at some point, it didn't pick up extra SCSS files. If the above solution does not work for you, manually concatenate all CSS files into sass/etc/all.scss and it should work then.

answered Sep 12, 2014 at 16:59

Alex Tokarev

4,8611 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

VAAA Over a year ago

Thanks a lot Alex, yes I have a SASS folder. I will move the files there. Do I have to change something in my Index.html? Or leaving there as .css will work? Appreciate it

Alex Tokarev Over a year ago

Yes, after moving CSS to sass/etc/ just remove their links from the boilerplate HTML - Sencha Cmd should compile them into one huge CSS file and place a link to that file in HTML.

VAAA Over a year ago

Amazing :) let me do that and will let you know my result

VAAA Over a year ago

Great it worked, the only ones that didn't work was FontAwesome.css and FamFamFam.css (this is a sprite). Didn't know why it didn't work maybe the order of the css affect something.

Alex Tokarev Over a year ago

I don't think there is a way to affect the order in which the SASS files are compiled; there's some deep internal logic involved. If you really need famfamfam.css to be loaded after the rest of CSS, keep it separate as you did before; I would strongly recommend to try finding out why it doesn't work instead, as it may cause you some grief down the road. Maybe some class names are clashing? That would be bad for maintenance.

|

Collectives™ on Stack Overflow

How to create custom SASS in ExtJS for compiling with Sencha CMD

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related