Скомпилируйте тему Sencha EXT JS с отображением SASS для Chrome Canary

Question

Chrome Canary предлагает несколько отличных функций инспектора SASS, если вы можете скомпилировать свою тему с отладочной информацией. Я выяснил, как это сделать в общих таблицах стилей Compass со строкой:sass_options = { :debug_info=>true }Однако EXT JS имеет процесс сборки, который (независимо от того, что он кажется) всегда компилирует сжатые файлы SASS. Их команда "testing" может раскрыть этот файл, но мне все еще нужны теги @media (или информация отладки), чтобы заставить работать инспектор SASS.

Кто-нибудь знает, как изменить процесс сборки темы Sencha EXT JS, чтобы добавить отладочную информацию для поддержки Canary? Или кто-нибудь знает, что build.css.preprocessor.opts.production делает в build.properties как это может быть связано?

Answer 1

Так что теперь у меня это работает, это не так здорово, как хотелось бы, так как Ext-JS имеет ТОННУ миксинов и другого импорта. Однако вот как это работает.

Настройка системы (здесь важны версии, так как 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 это захватывает все другие миксины и включает необходимые для самостоятельной компиляции, это очень важно!

Как только это будет сделано, вы можете запустить что-то вроде этого:
sass --compass --sourcemap {theme-name}-all.scss:resources/{theme-name}-all.css

Очевидно, измените их в соответствии с вашей средой. Для этого нужно скомпилировать css-файл в каталоге / resources (который должен быть там), и важно скомпилировать его, поскольку все ваши изображения и другие ресурсы относительно связаны с вашей таблицей стилей.

Оттуда я изменил index.html (должен быть в корне вашего приложения), чтобы он указывал на этот недавно созданный CSS-файл. Chrome также должен быть настроен для использования этой информации, однако это не входит в этот вопрос.

Надеюсь, это поможет кому-то еще. Это действительно смешанный пакет, так как в Сенче много тем. Надеюсь, со временем это станет лучше.

Answer 2

Попробуйте переключить режим с помощью:

sencha package build development // or `build debug`

Для build.css.preprocessor.opts.production, безусловно, его можно использовать (проверьте тест Сенча):

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

Если вы ищете бесплатные темы сенча или конструктор тем сенча, то это отличный сайт для этого.

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