Include an existing CSS file in custom extjs theme

Question

I have an existing CSS file that I would like to include in my ExtJS production build.

I am using a custom theme. I know I can go to MyApp/packages/myCustomTheme/sass/etc/ and use an @import in the all.scss file. But that uses the @import in the production file.

I'm hoping there is a way that I can get my existing CSS file compressed with the rest of my app's CSS.

score 2 · Answer 1 · answered May 22 '13 at 03:16

To include your custom css file in your production build, you can include the stylesheet above the  comment in your index.html. So your index.html should look like this:

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>YourAppName</title>
    <link rel="stylesheet" href="link-to-custom.css">
    <link rel="stylesheet" href="link-to-another-custom.css">
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <link rel="stylesheet" href="bootstrap.css">
                <script src="ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <script src="app/app.js"></script>
        <!-- </x-compile> -->
</head>
<body></body>

I don't know if there is better way of doing this. So far this has worked for me. Hope this helps.

Thanks @cclerville. This will be a good fallback, I'm still hoping there will be a solution that will work at the custom theme level, so that my files get wrapped up in my theme. — Brett, May 22 '13 at 14:32

score 1 · Accepted Answer · answered Sep 30 '13 at 21:16

According to the guide, we should be placing @import statements in etc/all.scss.

I found that in doing this, any imported files were in fact compiled in our theme's css file. Imports were not used in the production build.

http://docs.sencha.com/extjs/4.2.1/#!/guide/theming - see the section on "Adding Custom Utility SASS"

Include an existing CSS file in custom extjs theme

2 Answers2

Linked