How to use nib with stylus in WebStorm 7

It took me 15 minutes to figure this out ( I am a bit slow ) so I thought I would post here in case someone else was attemtpting to do this

Steps to use nib from webstorm 7 ( on Windows but should be same on linux distro or mac  )

1. Install nib globally from the command line
    npm install -g nib

2. Modify the arugments to the stylus file watcher found under file->settings-file watchers, select the stylus watcher and edit it

     Specifically what you need to change is the arguments input, highlighted below to the following

     --use \path-to-node-modules\nib\lib\nib $FileName$

    The path you use, path-to-node-modules, will depend on where node was installed on your box

stylus.png

That's it, after this using @import 'nib' should work fine (it works on by box anyway!)

3 comments

NOTE:

If you are using node+express you will most likely have to install nib locally and modify your app.js code if you want to generate css from the app itself, the instructions on the nib home page pretty much describe that though, this just pertained to getting the file watcher to work correctly with nib.

0

to use my global installation of nib I hadto add quotes to my absolute path, like this:

--use "C:\path-to-node-modules\nib\lib\nib" $FileName$

Thank you very much Todd, your "pill" has been very useful for me!

0

Please sign in to leave a comment.