使外部 CSS 文件与 ExtJS 6 一起使用时出现问题答案

【问题标题】：Problems Getting External CSS files to work with ExtJS 6使外部 CSS 文件与 ExtJS 6 一起使用时出现问题
【发布时间】：2016-04-04 16:36:07
【问题描述】：

我已经在 ext 5 中使用 cmd 以正常方式创建了我的应用程序，我所做的只是将我的 css 文件（在 index.html 文件中）和当我运行 sencha app 构建我的样式字覆盖那些在 ext 中（也就是 body 标签之类的东西）。

现在，我再次从头开始使用 cmd 重新创建了我的 ext 项目，复制到我的 app.js 和 app 文件夹中，它可以工作，但似乎我的应用程序闪烁了我的 body 标签，但随后它消失了，标准 css 需要结束了。

也就是说，在我的 index.html 中，我有以下几行：

<link href="/Content/Styles/scrum-style.css" rel="stylesheet" type="text/css"/>
<link href="/Content/Styles/SessionSchedule.css" rel="stylesheet" type="text/css"/>

***补充说明：阅读后，我已将这两个文件中的 css 复制到 /sass/etc/all.scss 中，并将 css 推送到生成文件的顶部，但它似乎仍然被覆盖。

（昨天也发到煎茶论坛但没有得到回应，所以在这里尝试）

【问题讨论】：

我不明白你到底想做什么。包含我自己的 JS 或 CSS 文件对我来说很好。
我意识到我在重新创建应用程序时没有更新主题类型，这导致了问题。一旦我改回原来的灰色主题，我之前写的 css 就可以正常工作了

标签： extjs extjs6

【解决方案1】：

您可以尝试将它们添加到app.json:

"css": [
    { "path": "Content/Styles/scrum-style.css" },
    { "path": "Content/Styles/SessionSchedule.css" },
    {
        // this entry uses an ant variable that is the calculated
        // value of the generated output css file for the app,
        // defined in .sencha/app/defaults.properties
        "path": "${build.out.css.path}",
        "bundle": true,
        "exclude": ["fashion"]
    }
],

或者您可以远程加载它们：

"css": [
    { "path": "Content/Styles/scrum-style.css", "remote": true },
    { "path": "Content/Styles/SessionSchedule.css", "remote": true },
    {
        // this entry uses an ant variable that is the calculated
        // value of the generated output css file for the app,
        // defined in .sencha/app/defaults.properties
        "path": "${build.out.css.path}",
        "bundle": true,
        "exclude": ["fashion"]
    }
],

但也可以将它们添加到“资源”：[] 以在构建时复制它们。

【讨论】：

【解决方案2】：

有两种方法可以在您的应用程序中包含外部 CSS 文件。

您可以在 index.html 文件中添加引用。在这种情况下，您需要在构建后手动将 CSS 文件复制到构建应用程序资源文件夹中。
您可以在 css 数组中的 app.json 文件中添加引用并构建应用程序。在这种情况下，如果您确实更改了 css 文件，则需要构建应用程序。

【讨论】：