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 Alex Tokarev · Accepted Answer · 2014-09-12T16:59:32

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.

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

1 Answers