Preprocessor imports

[buschtoens]

It should be possible to import arbitrary files when using a preprocessor.

For example, I have some definitions that are common for all components. Like responsive breakpoints or color schemes.

// /app/components/application-navbar/styles.sass
// /tmp/tree_merger-tmp_dest_dir-xxx.tmp/styles.sass

@import "../../styles/definitions.sass"

// expected: /app/styles/definitions.sass
// actual:   /styles/definitions.sass

This yields and error, as the cwd for the sass compiler is the tmp directory located at /tmp/tree_merger-tmp_dest_dir-xxx.tmp and not the actual location of the component directory.

As a workaround I can use this path, which exits the tmp directory and enters the app dir:

// /app/components/application-navbar/styles.sass
// /tmp/tree_merger-tmp_dest_dir-xxx.tmp/styles.sass

@import "../../app/styles/definitions.sass"

This is ugly and feels hacky. A possible solution would be adding the actual path of the component or the /app/styles directory itself to the lookup paths of the preprocessor.

[trentmwillis]

The issue here is that the pod stylesheets get concatenated into pod-styles.sass at the root level, therefore it seems to just be ignoring the ../../, so you should be able to just do: @import 'app/styles/definitions'.

My question is, why not just import definitions.sass into your app.sass file? Since you import pod-styles into the app stylesheet, it'll have access to everything you may need.

[webark]

@buschtoens we should get a test in for this. It might be supported in v0.2.1

[happycollision]

Oh! This thread solved a problem for me!

I didn't realize that you ought to import "pod-styles" after anything that you want to use in your component styles. (I didn't know what this add-on was doing in the background to implement it's functionality... makes perfect sense now).

Much cleaner than importing things with ../../ in front of them as I was doing. (../../ember-power-calendar etc)