Stylus imports styl files from the wrong folder

I have a file mobile.styl that collects all styl files I need via @import:

@import '../../common/styles/colors'
@import '../../common/styles/init'


@import 'landing'
@import 'faq'
@import 'vehicle'

I have two 'landing' styl files, one is in current folder where mobile.styl is and another is where those two first imported files are ../../common/styles/.

If I have the order of imports like shown above, then stylus imports first colors and init files which is fine, but then it loads landing file NOT from current folder where mobile.styl is, but from ../../common/styles/ so I get the wrong styl file, which is for desktop version.

Now, if I put those two imports to the end of the file, then it first loads landing, faq, vehicle properly, then those two files from the proper paths as expected.

Is this a bug or intended behaviour?

I've dealt with this same issue. A few solutions I've found are:

  • Rename one of the files to something unique.
    • change landing.styl to landing-mobile.styl
  • Move the file you want to import into it's own folder
    • move landing.styl to mobile/landing.styl
  • Import a file from the folder root you want to be in before importing the file of the same name
    • import empty.styl that lives next to landing.styl then import landing.styl
  • Lastly, you can reference the path relative to the last file imported
    • import ../../landing.styl

I've placed the options in order of my personal preference, but they all should do the trick.