Lorenz Meyer
Lorenz Meyer

Reputation: 19945

How to include custom css in Extjs 6?

I'm migrating from Extjs 4.2 to Extjs 6.2. I used to include a custom css file in the head with a simple link placed after the inclusion of Extjs.

<link rel="stylesheet" href="/custom.css" type="text/css" charset="utf-8" />

This does not work anymore, because of the way Extjs 6 loads its css files. They are injected at the end of the head.

So how do I include a custom css file in ExtJs 6 in order to override built-in rules ?

Edit: Right, there are already some answers to this question, but

So far so good, but:

Upvotes: 3

Views: 8573

Answers (1)

And-y
And-y

Reputation: 1524

In the app.json file is a section for external css files. If the section does not exist you can create it. After a sencha build the css file is loaded.

/**
 * List of all CSS assets in the right inclusion order.
 *
 * Each item is an object with the following format:
 *
 *      {
 *          // Path to file. If the file is local this must be a relative path from
 *          // this app.json file.
 *          //
 *          "path": "path/to/stylesheet.css",   // REQUIRED
 *
 *          // Specify as true if this file is remote and should not be copied into the
 *          // build folder. Defaults to false for a local file which will be copied.
 *          //
 *          "remote": false,    // OPTIONAL
 *
 *          // If not specified, this file will only be loaded once, and cached inside
 *          // localStorage until this value is changed. You can specify:
 *          //
 *          //   - "delta" to enable over-the-air delta update for this file
 *          //   - "full" means full update will be made when this file changes
 *          //
 *          "update": ""      // OPTIONAL
 *      }
 */
"css": [
    {
        "path": "bootstrap.css",
        "bootstrap": true
    },
    {
        "path": "custom.css"
    }
],

"output": {
    "page": {
        "path": "index.html"
    },
    "manifest": {
        "embed": true
    }
},

Upvotes: 5

Related Questions