如何在ExtJs 5中添加一個自定義的CSS文件？

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主題css。

在ExtJs 5.0中，這不起作用了。儘管包括微加載後的自定義CSS的，主題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最後是爲了替代在ExtJS的CSS文件中的一些規則加載？

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