如何在 Extjs 6 中包含自定义 css？

Question

我正在从 Extjs 4.2 迁移到 Extjs 6.2。我曾经在头部包含一个自定义 css 文件，在包含 Extjs.

之后放置一个简单的 link

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

这不再有效，因为 Extjs 6 加载其 css 文件的方式。它们是在头部末端注入的。

那么如何在 ExtJs 6 中包含自定义 css 文件以覆盖内置规则？

编辑：对，这个问题已经有一些答案了，但是

是关于 ExtJs 4.1
给出一些 links，这归结为：
复制文件custom.css到/packages/local/custom-theme/sass/etc
将行 @import 'custom.scss' 添加到 all.scss

到目前为止一切顺利，但是：

根据文档，sass/etc 文件夹在所有其他样式之前加载
我的自定义样式 sheet 的内容没有通过所有构建机制，不想显示在我的 `build/production/[appname]/resources/[appname] 中-all.css

Answer 1

在 app.json 文件中有一个用于外部 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
    }
},

如何在 Extjs 6 中包含自定义 css？

How to include custom css in Extjs 6?

css

extjs

extjs6