使外部 CSS 文件与 ExtJS 6 一起工作时出现问题

Question

我已经在 ext 5 中使用 cmd 以正常方式创建了我的应用程序，我所做的只是将我的 css 文件（在 index.html 文件中）以及我何时运行 sencha 应用程序构建我的样式单词覆盖 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 推入生成文件的顶部，但它似乎仍然将被覆盖。

（昨天也发布到 sencha 论坛，但没有得到任何回应，所以在这里尝试）

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

但是将它们添加到 "resources"：[] 以及在构建时复制它们。

Answer 2

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

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

使外部 CSS 文件与 ExtJS 6 一起工作时出现问题

Problems Getting External CSS files to work with ExtJS 6

extjs

extjs6