Как добавить пользовательский файл CSS в ExtJs 5?

Question

В ExtJS 4, я включил пользовательский CSS, как это:

<!-- <x-compile> --> 
    <!-- <x-bootstrap> --> 
     <link rel="stylesheet" href="bootstrap.css"> 
     <script src="ext/ext-dev.js"></script> 
     <script src="bootstrap.js"></script> 
    <!-- </x-bootstrap> --> 
    <script src="app.js"></script> 
<!-- </x-compile> --> 
<link rel="stylesheet" href="/custom/css.css" type="text/css" charset="utf-8" /> 

Тот факт, что ссылка на CSS приходит после того, как раздел <x-compile> делает, что он будет загружен позже и таким образом правила custom.css правил отменяют в скомпилированный extjs theme css.

В ExtJs 5.0 это больше не работает. Несмотря включая пользовательские CSS после microloader, тема CSS загружается после custom.css:

<script id="microloader" type="text/javascript" src="bootstrap.js"></script> 
<link rel="stylesheet" href="/custom/css.css" type="text/css" charset="utf-8" /> 

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

Answer 1

Откройте приложение app.json и найдите свойство css. Добавьте свой файл туда, и Sencha CMD свяжет его с фреймворком 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 
    } 
],