How to include custom css in Extjs 6?

Question

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

• https://stackoverflow.com/a/16682910/1951708 is about ExtJs 4.1

• https://stackoverflow.com/a/25176803/1951708 gives some links, and this boils down to this:

• copy the file custom.css to /packages/local/custom-theme/sass/etc

• add the line @import 'custom.scss' to all.scss

So far so good, but:

• According to the documentation, the sass/etc folder is loaded before all the other styles
• The content of my custom style sheet just does not get through all the build machinery and does not want to show up in my `build/production/[appname]/resources/[appname]-all.css

Answer 1

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
    }
},