2

I have a CSS file in the resources/css directory of my Ext JS package. Nevertheless package-all.css is empty after the sencha package build.

How can I make Sencha put the CSS file's contents into package-all.css? It should finally be copied to the all.css file of the app that uses the package.

Tarabass
  • 3,132
  • 2
  • 17
  • 35
ideaboxer
  • 3,863
  • 8
  • 43
  • 62

3 Answers3

3

You have to add it to package.json as a resource.

/**
 * Extra resources to be copied along when build
 */
"resources": [
  "resources/css/app.css",
"resources/images",
"resources/static",
"resources/libs",
  "resources/translations"
],

or even better as a css file.

/**
 * List of all CSS assets in the right inclusion order.
 * Each item is an object with the following format:
 *      {
 *          "path": "path/to/item.css" // Path to file, if local file it must be relative to this app.json file
 *          "remote": true             // (Optional)
 *                                     // - Defaults to undefined (falsey) to signal a local file which will be copied
 *                                     // - Specify true if this file is a remote file which will not to be copied
 *          "update": "delta"          // (Optional)
 *                                     //  - If not specified, this file will only be loaded once, and
 *                                     //    cached inside localStorage until this value is changed to either one below
 *                                     //  - "delta" to enable over-the-air delta update for this file
 *                                     //  - "full" means full update will be made when this file changes
 *
 *      }
 */
"css": [
{
  "path": "resources/libs/Arcgis v3.11/arcgis311.css",
  "remote": true
},
{
  "path": "resources/css/app.css",
  "remote": true
}
]
Tarabass
  • 3,132
  • 2
  • 17
  • 35
0

You can include it directly to index.html. Its working fine in build as well.` 

<title>xxxxx</title>

<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<link type='text/css' rel='stylesheet' href='resources/custom/css/my_css.css' />
<link type='text/css' rel='stylesheet' href='resources/fonts/font-awesome-4.3.0/css/font-awesome.css' />
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>

`

Ranjeet Singh
  • 662
  • 5
  • 12
  • Sencha's best practice is to not edit the index.html file, because it is re-generated in the build process. Sencha even puts it into a comment, and what you do is ignore the comment and just add your own lines of code. – Tarabass Sep 06 '15 at 19:51
0

Inspired by Tarabass' answer, I added my CSS file in package.json inside the package. Now it is used by the app.

"css": [{
  path: "resources/css/styles.css"
}],
ideaboxer
  • 3,863
  • 8
  • 43
  • 62
  • 1
    Forgot that's called `package.json` instead of `app.json`. I will edit my answer to be more precise for future users who want to accomplish the same. – Tarabass Sep 06 '15 at 19:53