PDA

View Full Version : Fashion - @import partials not working correctly...



FBNitro
17 Apr 2015, 10:35 AM
I'm using partial scss files.

In sass/etc/all.scss I've added the following:
@import "stuff/MyStuff";

In sass/etc/stuff/ I have the file _MyStuff.scss

When I run sencha app build testing I get the following error from Fashion:
successfully loaded page http://localhost:1841/sass/example/fashion.html?phantomjs=true
loading phantomjs adapter
processing update type : BuildSassFile
failed to download path : http://localhost:1841/sass/etc/stuff/MyStuff.scss

I can rename the file from _MyStuff.scss, but then it's no longer a partial and it's not imported into my .css output.


Sass reference: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials

dongryphon
17 Apr 2015, 9:25 PM
Fashion does not currently support this usage. What is in the file that make you want it to be a partial?

FBNitro
20 Apr 2015, 6:18 AM
Fashion does not currently support this usage. What is in the file that make you want it to be a partial?

The project I'm trying to move to Ext6 has about 200 scss files, each of which are imported into a single css via partials.

Reorganizing this into one big scss will be difficult, since some are externally provided by other departments, some are third party, and others are split up this way for code organizational reasons.

Sass suggests this method of usage here: http://thesassway.com/beginner/how-to-structure-a-sass-project

snophox
20 Apr 2015, 7:21 AM
This really needs to be fixed.

I am in the same boat.


Reorganizing this into one big scss will be difficult, since some is externally provided by other departments, some is third party, and others were split up this way for code organizational reasons.

mrinsan
20 Apr 2015, 3:19 PM
Reorganizing this into one big scss will be difficult, since some are externally provided by other departments, some are third party, and others are split up this way for code organizational reasons.


Me too

heljo05
22 Apr 2015, 12:18 PM
Is there any way to reform the dependency on Compass so we may use partials?

dongryphon
27 Apr 2015, 8:35 PM
If you are happy using Compass to generate a CSS file you can always continue to do so and just include the file(s) you generate in the "css" assets of the application.

Fashion is currently only used by Cmd to compile the Sass of an application or package and so it generates the set of scss files needed by that build for you (see http://docs.sencha.com/extjs/5.1/core_concepts/theming.html though there will be some adjustments for v6 and Fashion).

In this sense, because Cmd / Fashion does not scan a directory and process all scss files, all scss files are all treated as "partials" in Sass terms... since they are never individually converted to CSS files.

This has always been the case with Cmd applications and packages even when using Compass / Sass (pre-6). The build scripts would generate one all.scss file full of @import statements to each of the scss files the compiler decided aligned with JavaScript classes in use by the app or package.

To recap: the sass folder of an app or package is handled specially by Cmd and not as per a directory based Sass project. This does not preclude you from having such a project and using its CSS outputs in your project.

Hopefully that clears up some of the questions... but if not, please be a bit more specific about how you had been working with Sass in Cmd apps prior to 6.

dongryphon
27 Apr 2015, 8:41 PM
I'm using partial scss files.

In sass/etc/all.scss I've added the following:
@import "stuff/MyStuff";

In sass/etc/stuff/ I have the file _MyStuff.scss
...
I can rename the file from _MyStuff.scss, but then it's no longer a partial and it's not imported into my .css output.


The rename to drop the "_" should work in this case. There is no special meaning to the "_" in Fashion and it should just import the content for you.

In Cmd pre-6, there should likewise be little difference in this case since we don't tell Compass to process the "sass/etc" directory. Instead we just @import the "all.scss" file from it.

Can you post a snippet of the MyStuff.scss file? Maybe there is something in it that Fashion does not support or handle properly.

FBNitro
4 May 2015, 12:41 PM
Can you post a snippet of the MyStuff.scss file? Maybe there is something in it that Fashion does not support or handle properly.

Unfortunately, MyStuff.scss was just a sample name to show the missing feature. In reality, I have close to 200 .scss files that get imported.

At the moment, even if I rename them all to remove the _, nothing gets imported into the output css file. All I get is the 'base' sencha stuff.

dongryphon
6 May 2015, 3:31 PM
I'm not sure I follow what you are attempting because I have used @import in Compass and Fashion to import Font Awesome's scss files and (other than the "_" name issue) it works fine. The content is included.

Was this working for you in Cmd 5 (using Compass internally)? Or did you build stuff outside of Cmd?

FBNitro
7 May 2015, 6:10 AM
Yes, it was working fine with Compass, we were using Sencha Command 4.x w/Touch 2.4.1 for the build and all was well.

I'll try playing with Fashion again, hopefully I can put together a small sample to reproduce what I'm seeing.

FBNitro
7 May 2015, 10:09 AM
Ok, I've got a few problems with Fashion if I rename everything.

Problem #1
@include background($llmap-background !important); <-- Functions won't take extra args, in Compass they would append any extra args to the end. For example, this !important cannot be included, whereas it could previously. I've removed them temporarily to get around this.

Problem #2 (related to #3)
@import 'sencha-touch/default'; this fails, I assume it needs to be something else, or it needs to be removed. I believe the mixins for icon-font and inline-font-files were in this space, which is why #3 is a problem.

Problem #3
Fashion just fails, with no real info about what happened, even with --debug turned on:

building scss file ..\..\build\temp\testing\MyApp\sass\MyApp-all.scss
scss build error for ..\..\build\temp\testing\MyApp\sass\MyApp-all.scss
TypeError: 'undefined' is not an object (evaluating 'mix.scope')
TypeError: 'undefined' is not an object (evaluating 'mix.scope')
saving generated css
loading generated css

The output css file has only this entry: /* TypeError: 'undefined' is not an object (evaluating 'mix.scope') */

I think I traced this down to either icon-fonts or inline-font-files mixins being missing, but it's a guess at this point. They could both be missing...

Debug output Question
Additionally, I notice in the log (when debug is enabled), I see: "[DBG] filled -1/0", does this mean the file in question did not get imported?

dongryphon
11 May 2015, 9:18 AM
I will have a look at #1. Thanks for the details!

For #2 the way themes come together for Ext JS 6 is like Ext JS 4.2/5/5.1 and not like Sencha Touch. In particular we use Cmd packages to contain theme rules. We will have more content on the upgrade process from Sencha Touch, but if you've never played with Ext JS themes before I'd recommend looking at http://docs.sencha.com/extjs/5.1/core_concepts/theming.html to see how it works.

The inline options for fonts and images will be a compile-time setting for Fashion (given a size threshold) instead of manually done via mixins. We will still try to get support for those calls but at present they are not supported.