Как включить пользовательский css в Extjs 6?

Question

Я перехожу из Extjs 4.2 в Extjs 6.2. Я использовал, чтобы добавить пользовательский файл css в голову с простой ссылкой, помещенной после включения Extjs.

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

Это не работает больше, из-за того, что Extjs 6 загружает свои файлы css. Они вводятся в конце головы.

Как я могу добавить пользовательский файл css в ExtJs 6, чтобы переопределить встроенные правила?

Edit: Да, уже есть некоторые ответы на этот вопрос, но

• https://stackoverflow.com/a/16682910/1951708 около ExtJs 4,1

• https://stackoverflow.com/a/25176803/1951708 дает некоторые ссылки, и это сводится к следующему:

• скопируйте файл custom.css в /packages/local/custom-theme/sass/etc

• добавить строку @import 'custom.scss' в all.scss

До сих пор так хорошо, но:

• Согласно документации, папка sass/etc загружаются перед тем всех других стилями
• Содержания моих пользовательских стилей просто не получить через все механизмы сборки и не хочет появляться в моем `build/production/[appname]/resources/[appname] -all.css

Answer 1

ВФайл- это раздел для внешних файлов css. Если раздел не существует, вы можете его создать. После сборки sencha загружается файл css.

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