Question

Chrome Canary提供了一些出色的SASS检查器功能，如果您可以使用调试信息编译主题。我已经弄清楚如何在通用Compass样式表中使用行sass_options = { :debug_info=>true }执行此操作，但是EXT JS具有构建过程（无论看起来如何）始终编译压缩的SASS文件。他们的“测试”命令可以扩展此文件，但我仍然需要@media标签（或调试信息）才能让SASS检查器工作。

有谁知道如何更改Sencha EXT JS主题构建过程以添加Canary支持的调试信息？或者有没有人知道build.css.preprocessor.opts.production在build.properties中做了什么，因为它可能是相关的？

Answer 1

所以我现在有这个工作，它没有我想要的那么好，因为Ext-JS有一个TON of mixins和其他进口。然而，这是如何让它工作。

系统设置（这里的版本很重要，因为Chrome 27+仅支持某种类型的源映射）：
Ext-JS 4.2.1
SASS (3.3.0.alpha.149)
Compass (0.12.2)

在此之后，转到主题包并运行sencha package build。这或多或少会在您的主题包中构建/ build文件夹。这个构建还将生成一个{theme-name}-all.scss，它可以抓取所有其他mixins，并且需要独立编译，这是至关重要的！

完成后，您可以运行以下内容：
sass --compass --sourcemap {theme-name}-all.scss:resources/{theme-name}-all.css

显然要根据您的环境进行更改。这样做是在/ resources目录中构建一个已编译的css文件（应该在那里），并且在那里进行编译是很重要的，因为所有图像和其他资源都与样式表相关联。

从那里我更改了index.html（应该在你的应用程序的根目录中）以指向这个新生成的css文件。 Chrome也需要设置为使用此信息，但这不在此问题之内。

希望这有助于其他人。这真是一个混合包，因为Sencha涉及的主题有很多。希望随着时间的推移，这会变得更好。

Answer 2

尝试通过以下方式切换模式：

sencha package build development // or `build debug`

对于build.css.preprocessor.opts.production，绝对可以使用（检查sencha test）：

build.options=logger:${build.options.logger},
debug:${build.options.debug},
product:${build.options.product},
minVersion:${build.options.minVersion},
${build.options.default},
${build.options.custom}

Answer 3

如果您正在寻找免费的sencha主题或sencha主题建设者，这里是一个很棒的网站

http://developerextensions.com/index.php/sencha-theme-builder

使用SASS映射为Chrome Canary编译Sencha EXT JS主题

3 个答案: