如何在 ExtJS 中创建自定义 SASS 以使用 Sencha CMD 进行编译答案

【问题标题】：How to create custom SASS in ExtJS for compiling with Sencha CMD如何在 ExtJS 中创建自定义 SASS 以使用 Sencha CMD 进行编译
【发布时间】：2014-09-12 14:08:09
【问题描述】：

我的应用程序是用 ExtJS 4.2.1 构建的

我的应用结构是使用Sencha Cmd v4.0.1.45.生成的

我在我的应用程序中使用了一些自定义 CSS 来提供个性化的样式，因此我的 XTemplate 项目以及我使用 AwesomeFont 和 FamFam Sprites 作为图标。

这是我的应用程序 sencha cmd 结构中的资源目录：

App.css 是自定义 CSS
BoxSelect.css 是其他自定义 CSS
chooser.css 是其他自定义 CSS
famfamfam.css 是处理 famfam.png 图像精灵的 CSS
font.css 是 AwesomeFont 自带的 CSS。

开发模式下的应用程序（不构建）运行良好，但是当我尝试使用 Sencha CMD 构建然后尝试打开 production Index.html 我看不到任何图标从我的自定义 CSS 文件中应用的样式。

所以我最终修改了我的应用 Index.html，以便将我的所有 CSS 引用移到标签之外。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Application</title>


    <!-- <x-compile> -->
    <!-- <x-bootstrap> -->
    <link rel="stylesheet" href="bootstrap.css">


    <script src="ext/ext-dev.js"></script>

    <script src="bootstrap.js"></script>
    <!-- </x-bootstrap> -->


     <!-- Ext Scheduler -->
     <script src="lib/js/sch-all-debug.js"></script>

    <script src="../Scripts/jquery-2.1.1.min.js"></script>
    <script src="../Scripts/jquery.vegas.min.js"></script>
    <script src="../Scripts/jquery.signalR-2.0.3.min.js"></script>

     <!-- Ext Scheduler -->
    <link rel="stylesheet" href="resources/css/sch-all-neptune.css">

    <link rel="stylesheet" href="../Content/jquery.vegas.min.css">

    <script src="app/Constants.js"></script>
    <script src="app/Glyphs.js"></script>
    <script src="app.js"></script>

    <!-- </x-compile> -->

    <link rel="stylesheet" href="resources/css/app.css">
    <link rel="stylesheet" href="resources/css/boxselect.css">
    <link rel="stylesheet" href="resources/css/fonts.css">
    <link rel="stylesheet" href="resources/css/famfamfam.css">
    <!-- view icons chooser style -->
    <link rel="stylesheet" href="resources/css/chooser.css">


</head>
<body></body>
</html>

这样做效果很好，但我想创建一个 SASS，以便可以缩小我的自定义 CSS 文件。

任何关于我必须遵循哪些步骤才能为我的自定义 CSS 创建我的 SASS 以便在执行 sencha app build production 时我的 CSS 被缩小的线索？

感谢任何帮助。

【问题讨论】：

标签： extjs extjs4 extjs4.1 extjs4.2 sencha-cmd

【解决方案1】：

在您的应用程序文件夹中，应该有sass 文件夹。将您的 CSS 样式表移动到 sass/etc/ 并重命名为 *.scss，然后运行 sencha app build。这应该可以解决问题。

一个警告：我记得 Cmd 中有一个错误，它没有拾取额外的 SCSS 文件。如果上述解决方案不适合您，请将所有 CSS 文件手动连接到 sass/etc/all.scss 中，然后它应该可以工作。

【讨论】：

非常感谢 Alex，是的，我有一个 SASS 文件夹。我将把文件移到那里。我是否必须更改我的 Index.html 中的某些内容？或者离开那里，因为 .css 会起作用？欣赏它
是的，在将 CSS 移动到 sass/etc/ 之后，只需从样板 HTML 中删除它们的链接 - Sencha Cmd 应该将它们编译成一个巨大的 CSS 文件并在 HTML 中放置指向该文件的链接。
太棒了 :) 让我这样做，然后让你知道我的结果
很好用，唯一没用的是 FontAwesome.css 和 FamFamFam.css（这是一个精灵）。不知道为什么它不起作用也许css的顺序会影响某些东西。
我认为没有办法影响 SASS 文件的编译顺序；这涉及到一些深层的内部逻辑。如果您确实需要在其余 CSS 之后加载 famfamfam.css，请像以前一样将其分开；我强烈建议您尝试找出它为什么不起作用，因为它可能会给您带来一些悲伤。也许有些类名有冲突？这对维护不利。