Import

Stylus supports both literal @import for CSS, as well as dynamic importing of other Stylus sheets.

Literal CSS

Any filename with the extension .css will become a literal, for example:

@import "reset.css"

will render to the literal css @import shown below:

@import "reset.css"

Stylus Import

When using @import without the .css extension, it is assumed to be a Stylus sheet, for example @import "mixins/border-radius".

@import works by iterating an array of directories, and seeing if this file lives in any of them, similar to node's require.paths. This array defaults to a single path which is derived from the filename option's dirname. So if your filename is /tmp/testing/stylus/main.styl, then import will look in /tmp/testing/stylus/.

In the example below we set the paths options to provide additional paths to Stylus. Within ./test.styl we could then @import "mixins/border-radius" or @import "border-radius" since ./mixins is exposed to Stylus.