PDA

View Full Version : Building packages separately but dependent on theme scss



LailaAgaev
27 Nov 2014, 1:38 PM
Hi all!

My application is separated into 1 app, 1 theme package, 1 core functionality package, and a bunch of module packages which may be included in various combinations. The way to accomplish this is (I think, unless these is a better way?) to build each package separately and then serve an index.html that adds the package's .js and .css files based on which package should be included.

The problem is that the packages won't build because they are dependent on the theme package's SCSS variables. IE if I define some custom SCSS variables or mixins, etc in the theme, then attempt to use them in the package the build process fails to find them. The application itself builds fine.

The packages currently require the theme package... is there something I am missing?

lumberjack
1 Dec 2014, 3:30 PM
Regarding the core functionality package and the module packages, these packages are of the type "code", correct? Can you provide an example of the usage of your theme variables or mixins within one of the module package's code?Thanks,Brian

LailaAgaev
2 Dec 2014, 8:58 AM
Hi Brian,

Yes all the packages (excepting the theme package) are of type "code".
The theme package is of type "theme".

A usage example is as follows:

In a module package's sass/src/CatMan/view/CategoryListView.scss file (this file corresponds to a component in the package's src, and is correctly included during a build), the
following SCSS is used:



.k-catman-categorylistview-table {
color: $k-light-font-color;
width: 100%;
border-bottom: 1px solid darken($k-light-font-color, 15%);
}



The $k-light-font-color variable is defined in:

The theme package's sass/var/kloud.scss

This file is included (using @import) in the theme's sass/etc/all.scss file (because it is a general variable file, and doesn't correspond to a specific component, it would otherwise not be included in the build at all. It contains various global variables we use throughout our SCSS).

theme package's /sass/etc/all.scss:


@import 'mixins';
@import '../var/Component';
@import '../var/kloud';
@import '../var/icons';
@import '../src/Core/action/styles';
@import '../src/Core/styles';

If I build the entire app, this is correctly resolved.
If I build just the package, this variable is "undefined".

Here is the error I see (I also see another similar error, about a mixin that cannot be found because it is in the theme):


executing compass using system installed ruby runtime
error CatalogueManagement-all-debug.scss (Line 4 of ../sass/src/CatMan/view/CategoryListView.scss: Undefined variable: "$k-light-font-color".)
identical resources/CatalogueManagement-all-debug.css

Thanks for your help!
Laila

lumberjack
2 Dec 2014, 9:36 AM
One more question: what version of Sencha CMD is in use?

I ask because it looks like, from our documentation, it may be a known issue on some versions of Sencha CMD:


NOTE: In Cmd v3.1.0, sencha package build may fail if you have Sass that depends on the theme. To workaround this limitation, you can set theskip.sass and skip.slice properties in ".sencha/package/sencha.cfg". The package will be usable in an application because the theme will be included in sencha app build.

LailaAgaev
2 Dec 2014, 12:53 PM
My cmd is version 4.0.4.84 (the EXT version is 4.2.2) so it doesn't look like that's the problem.

The problem for me is that I really need the SASS from the package to be built into a CSS file... I cannot skip that step like the documentation for 3.1.0 suggests...

lumberjack
3 Dec 2014, 10:26 AM
It is generally best practice to avoid having a code package require a theme package. An alternative approach is to have your code package built for a specific theme. This can be accomplished by providing a custom "builds" property in your package.json file.


{
//... other package.json props
"builds": {
"neptune": {
"framework": "ext",
"theme": "ext-theme-neptune"
},
"custom": {
"framework": "ext",
"theme": "my-custom-theme"
}
},
"output": {
"base": "${package.dir}/build/${build.id}",
"js": "..",
"sass":""
},
// do not require the theme package in the "requires" array
"requires": []
}

This setup allows for theme-specific version of your package to be built individually. The Sencha Charts package follows this setup, providing theme specific versions of the css for the chart components, but utilizes the same javascript code regardless of the theme.

LailaAgaev
3 Dec 2014, 12:12 PM
Thank you!

I will try to use this setup instead, and report my results.