ExtJS Classic 7.3.0：使用 .scss 文件样式化应用程序视图

如何解决ExtJS Classic 7.3.0：使用 .scss 文件样式化应用程序视图

来自 this link 的主题：

要编写与应用程序视图关联的 CSS 规则，您需要创建一个 .scss 文件 在与视图相同的文件夹中并具有相同的基本名称。为了 例如，要设置视图 App.view.main.Main 的样式，您可以将 Main.scss 添加到该文件夹​​：

在此之后，我在同一个文件夹中有 2 个文件：Form.js 和 Form.scss

在 Form.scss 中，如果我定义一个自定义类并将其包含在 Form.js 中，它会起作用并且我看到样式适用。这有效：

.toolbar-red {
    background:green;
}

但是如果我做任何事情来引用 Extjs 的内部类，它将不起作用。例如，这不起作用：

.bold-grid .x-column-header-text-inner {
    font-weight: bold;
}

我知道上面的样式是有效的，因为当我在我的 /theme/sass/src/Application.scss 中添加这个样式时，它可以正常工作。仅供参考，我正在使用 Sencha Architect，并将我的自定义样式添加到主题 sass 文件作品中。但我希望它们位于单独的文件中，因此我试图将它们添加到 Form.scss 中。但是如上所述，如果我使用内部类，它就不会捡起来。

解决方法

您自己的主题可能有不同的前缀吗？

也许试试这个：

.bold-grid .#{$prefix}column-header-text-inner {
        font-weight: bold;
}

,

您可以访问 Sencha Themer 吗？如果是这样，它真的很容易做到。在主题中打开您的主题并为工具栏创建自定义 UI。您可以对任何组件执行此操作，顺便说一句。无论您如何命名自定义 UI，您都将在 SA 中使用它。 保存并应用于您的 SA 主题后，返回 SA 并重新编译主题。这是通过单击项目检查器窗格底部的按钮来完成的。完成后，转到项目检查器中的工具栏，并将 ui 配置选项设置为您命名的自定义 ui。