在自定义 extjs 主题中包含现有的 CSS 文件答案

【问题标题】：Include an existing CSS file in custom extjs theme在自定义 extjs 主题中包含现有的 CSS 文件
【发布时间】：2013-05-09 15:22:55
【问题描述】：

我有一个现有的 CSS 文件，我想将它包含在我的 ExtJS 生产版本中。

我正在使用自定义主题。我知道我可以转到 MyApp/packages/myCustomTheme/sass/etc/ 并在 all.scss 文件中使用@import。但这在生产文件中使用了@import。

我希望有一种方法可以让我现有的 CSS 文件与我应用的其余 CSS 一起压缩。

【问题讨论】：

标签： extjs themes extjs4.2

【解决方案1】：

要将您的自定义 css 文件包含在您的生产构建中，您可以在您的 index.html 中包含  评论上方的样式表。所以你的index.html 应该是这样的：

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>YourAppName</title>
    <link rel="stylesheet" href="link-to-custom.css">
    <link rel="stylesheet" href="link-to-another-custom.css">
        <!-- <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/app.js"></script>
        <!-- </x-compile> -->
</head>
<body></body>

我不知道是否有更好的方法来做到这一点。到目前为止，这对我有用。希望这会有所帮助。

【讨论】：

谢谢@cclerville。这将是一个很好的后备方案，我仍然希望有一个可以在自定义主题级别上工作的解决方案，以便我的文件可以包含在我的主题中。

【解决方案2】：

根据指南，我们应该在 etc/all.scss 中放置 @import 语句。

我发现在这样做时，所有导入的文件都被编译到了我们主题的 css 文件中。生产版本中未使用导入。

http://docs.sencha.com/extjs/4.2.1/#!/guide/theming - 请参阅“添加自定义实用程序 SASS”部分

【讨论】：