我正在使用 Ext JS 4 开发一个大型 RIA 应用程序。在我的 index.html 中我有以下定义:
<link rel="stylesheet" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/GridFilters.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/RangeMenu.css">
<link rel="stylesheet" href="resources/css/default/index.css">
<link rel="stylesheet" href="resources/css/default/profile/user.css">
<link rel="stylesheet" href="resources/css/default/profile/documents.css">
问题
在提供的代码中只有 index.css
存在,但我的应用程序中的每个 View 都有自己的 CSS 样式表,它将使用自己的 Sprite /图像(我添加了 user.css
和 documents.css
以提供的代码为例)。所有这些都将变成大量未缩小的 CSS 文件,这将显着减慢应用程序的加载时间。
此外,某些样式的 Ext JS 'ux' 组件未包含在 ext-all.css
(GridFilters.css
和 RangeMenu.css
中提供的代码)。
我可以写一个脚本,将所有这些 CSS 文件压缩到一个文件中,但是......
问题
- 为 Ext JS 4 应用程序设计样式的正确方法是什么?也许应该创建
SCSS
文件并在那里进行所有样式设置,然后每次使用compass compile
进行编译以创建 CSS 文件并进行开发? - 有什么方法可以包含标准 Ext JS 4 发行版中的“ux”组件的样式吗?像
ext-all.css
这样的 'ux 组件(像ext-ux-all.css
)
我希望很多人都在使用 Ext JS 创建出色的应用程序,并且他们已经为自己考虑或解决了此类问题。如果能分享有关此主题的任何知识,我将不胜感激。
最佳答案
我和你的情况类似。
我所做的是首先包含 ext css 文件:
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-gray.css">
然后我所有的应用程序 css 都是使用 compass 生成的。因此,有大量的 scss 文件被编译成一个 css 文件。您可以使用 compass watch
,以便在 scss 文件更改时编译您的 css。
我不得不说,一旦您习惯了 compass 和 sass/scss,就很难证明纯 css 文件的合理性 - compass 和 sass 生成更好的跨浏览器 css,并且 scss 文件比纯 CSS。
至于ux css。我不会太担心,但您有两个选择:
- 只需将您的 ux css 文件导入您的主 scss 文件(参见 this answer);
- 使用众多 css 统一器/合并器/缩小器中的一种。
关于css - 设计大型 ExtJS 应用程序的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14517861/