Reputation: 19945
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/25176803/1951708 gives some links, and this boils down to this:
copy the file custom.css to /packages/local/custom-theme/sass/etc
@import 'custom.scss'
to all.scss
So far so good, but:
sass/etc
folder is loaded before all the other stylesUpvotes: 3
Views: 8573
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