Sencha Touch 2 CSS 不工作答案

【问题标题】：Sencha Touch 2 CSS not workingSencha Touch 2 CSS 不工作
【发布时间】：2012-05-01 00:25:51
【问题描述】：

当创建一个新的 CSS 主题并用 compass 编译主题后，样式没有变化。一切都和以前一样，使用默认主题。如何解决？

【问题讨论】：

请说的更具体一些，因为你的问题很奇怪
我以简单的方式发布此问题，因为我也想以简单的方式回答它。我不知道是不是因为以前的教程，但有些东西让我把指向 css 文件的链接放在包含 Sencha Touch SDK 的脚本上方。此外，例如包括 pictos 工作正常这一事实并不能帮助理解发生了什么。在文档或教程的某处应该有一个注释，以确保您在 JS 之后包含 css。

标签： css sencha-touch sass sencha-touch-2 compass-sass

【解决方案1】：

确保将链接移至 CSS 文件的下方：

<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>

我把它放在<head></head> 元素的末尾。

(...)
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
<link rel="stylesheet" href="default-theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
(...)

【讨论】：

【解决方案2】：

只需将所有变量放在默认的@import 语句下方，如下所示：

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

$base-color: #27ae60;
$base-gradient: 'matte';
$alert-color: #2ecc71;
$confirm-color: #e67e22;
$page-bg-color: #3498db;
$form-bg-color: #ecf0f1;
$button-radius: '0px';

【讨论】：