Include an existing CSS file in custom extjs theme

问题

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.

回答1:

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.

回答2:

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"

来源：https://stackoverflow.com/questions/16465364/include-an-existing-css-file-in-custom-extjs-theme

标签

extjs

themes

extjs4.2