Importing breaks when a package has a same relative import path as the app

[RobinVanCauter]

I wasn't sure how to phrase this, but I'll try and explain our problem here.

Say we have a project with a bunch of components and one of those components has the same relative import URL as a component in a different package. For example our project import index file has the following imports;

@import '{mk:packagename}/all';
@import '{}/modules/orders/orders';

The _orders.scss file has a relative import within the module's folder:

@import 'components/card/card';

The _all.scss file is the index file of the package and has the following import in it;

@import 'components/card/card';

For some reason the second import is ignored or at least it looks that way. The class is not outputted in the final CSS used by the application. When we rename our 'card' partial in the projects component folder everything works.

Is this expected behavior?

[sebakerckhof]

Yeah, this is known.
Basically in order to allow cross package imports (the {mk:packagename} syntax), I had to write a custom importer for node-sass. However, in the case of relative file paths, node-sass doesn't give me enough information about the file for me to know exactly what the full file path is (and it's not likely to change: sass/node-sass#1188 ).

This means that the code more or less has to guess what the path is, but this breaks if you have duplicates. I didn't find any good way to work around this issue.

What you could do is change the relative path into an absolute one (start with {} or {mk:packagename})

[RobinVanCauter]

Alright, thanks, good to know.

We'll make sure to use more absolute paths in our packages then.

Thanks for the quick response!