如何在 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" />

link 到 CSS 出现在 <x-compile> 部分之后的事实使得它稍后加载，因此在 custom.css 中规则覆盖编译的规则extjs 主题 css.

在 ExtJs 5.0 中，这不再有效。尽管在 microloader 之后包含自定义 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
    }
],

如何在 ExtJs 5 中添加自定义 CSS 文件？

How to add a custom CSS file in ExtJs 5?

css

extjs

extjs5