如何在ExtJs 5中添加自定义CSS文件？ [英] How to add a custom CSS file in ExtJs 5?

问题描述

在ExtJs 4中，我添加了一个自定义css，如下所示：

In ExtJs 4, I included a custom css like this:

<!-- <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中的规则。

The fact that the link to the CSS comes after the <x-compile> section makes that it is loaded later and thus rules in custom.css override rules in the compiled extjs theme css.

在ExtJs 5.0中，这不再工作了。尽管在微型加载器之后包含了自定义css，但在 custom.css 后加载主题css：

In ExtJs 5.0, this doesn't work anymore. Despite of including the custom css after the microloader, the theme css is loaded after 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

How to achieve that custom.css is loaded last in order to override some rules in the ExtJs css file ?

推荐答案

打开app.json并查找css属性。添加您的文件在那里和Sencha CMD将捆绑它与框架CSS。默认值如下所示：

Open app.json and look for the css property. Add your file in there and Sencha CMD will bundle it with the framework CSS. The default one looks like this:

/**
 * 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文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！