Reference to undeclared variable - building package with 6.0.1

[steenole]

Just downloaded ExtJs 6.0.1 and Sencha Cmd 6.0.1
Generated a new workspace
sencha generate package --type CODE wtf
Edit package.json and set "framework": "ext" and "toolkit": "classic"

Now try sencha package build

[INF] Building ..\..\build\wtf-all-debug.scss
[INF] Build error for ..\..\build\wtf-all-debug.scss
[ERR] Error: Reference to undeclared variable : $font_icon_font_family at : C:\dev\work601/ext/packages/core/sass/var/list/TreeItem.scss:57
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExBuild: Error: Reference to undeclared variable : $font_icon_font_family at : http://localhost:1841/ext/package
s/core/sass/var/list/TreeItem.scss:57
[ERR]   at com.sencha.ant.An
[ERR] tScript.execute(AntScript.java:116)
[ERR]
[ERR] Total time: 5 seconds
[ERR] The following error occurred while executing this line:
C:\dev\work601\packages\local\wtf\.sencha\package\build-impl.xml:188: The following error occurred while executing this line:
C:\dev\work601\packages\local\wtf\.sencha\package\sass-impl.xml:263: The following error occurred while executing this line:
C:\dev\work601\packages\local\wtf\.sencha\package\sass-impl.xml:206: The following error occurred while executing this line:
C:\dev\work601\packages\local\wtf\.sencha\package\sass-impl.xml:245: com.sencha.exceptions.ExBuild: Error: Reference to undeclared variable
 : $font_icon_font_family at : http://localhost:1841/ext/packages/core/sass/var/list/TreeItem.scss:57

[hugo.brizard]

+1 : Same error

[bhutten]

I am seeing the exact same error - but for me it's happening with an application that I just upgraded from Ext5 to 6.0.1 (via sencha upgrade etc...). Anyone have a solution?

[bjdurham85]

Thanks for all the info on this, I've submitted a bug report and this will be corrected on a future release.


Now for a workaround.


Option 1- (preferred if you want a particular theme)
--In your package.json you'll need to define a theme:
"theme":"theme-classic" | theme-neptune | theme-triton

***More details than be described but stems from the inheritance of themes and way in which scss files are loaded.

Option 2 - (preferred if you want just basic non-themed package)
--Add the following lines to packages/.sencha/sencha.cfg
skip.sass=1
skip.slice=1


Option 3-
--Add the following line to sass/etc/all.scss
$font-icon-font-family: dynamic(FontAwesome);


Hope this helps!
Bryan

[hugo.brizard]

Thanks!

I confirm for Option 3!

[jamesjara]

Reconfirmed, option 3 more cleaner, thanks a lot

[maxim.lichmanov]

If "charts" package is set as dependency, then build fails with this error

[ERR] Error: Reference to undeclared variable : $button_medium_border_radius at :  [workspace]/ext/packages/charts/classic/sass/var/chart/AbstractChart.scss:1[ERR] [ERR] BUILD FAILED[ERR] com.sencha.exceptions.ExBuild: Error: Reference to undeclared variable : $button_medium_border_radius at : http://localhost:1841/ext/packages/charts/classic/sass/var/chart/AbstractChart.scss:1[ERR] 	at org.apache.tools.ant.Project.executeSort[ERR] edTargets(Project.java:1399)

[davmillar]

Any updates on a fix for this?

[Anton Plankton]

Same problem here, this time with undeclared variable:
$conditional_panel_header_background_color

(extending ext-theme-neptune)

[edit] and the most annoying thing is: I cannot find this variable neither in the docs nor in the SDK for the life of me.

[edit2] alright, there's a variable called $conditional-panel-header-background-color in a scss I am importing. By magic, Sencha Cmd changed the variable name.

[Anton Plankton]

The issue is resolved for me.
Problem was in an imported scss file: for some reason, Fashion does not scope all variables inside functions as expected. Some vars that have been declared outside functions (as $varname: value !default) are not accessible inside the function (whereas others are). I gave up on finding out why (Sencha Cmd's error messages are horrifiying) and just pass those vars as arguments. Whatever.