Add node_modules and src directories to Stylus paths. Third party CSS files can now be imported with absolute path

README.md

@@ -43,7 +43,7 @@ Minification, uglification and other tasks you're expected to run before deployi
 #### Dependencies
 All dependencies are meant to be installed with **npm**.
 * JavaScript-files from **node_modules** can be *require()*'d in client-side modules.
-* CSS files can be [imported](https://learnboost.github.io/stylus/docs/import.html) from **node_modules** using relative path from the stylus file to the css file e.g `@import '../../node_modules/bootstrap/dist/css/bootstrap.css'`
+* Third party CSS files should be [imported](https://learnboost.github.io/stylus/docs/import.html). Stylus has been configured to use **node_modules** as one of the base directories so you can import file like this:  `@import 'bootstrap/dist/css/bootstrap.css'`
 * You can either create a new gulp task for copying other assets from directories mentioned above or use an array as a value for [assets sources](https://github.com/leonidas/gulp-project-template/blob/master/gulpfile.js#L38) e.g `source: ['./src/assets/**/*.*', 'node_modules/bootstrap/fonts*/*.*']` *(notice the asterisk after 'fonts'? It makes gulp copy the whole directory instead of just the files inside of it)*
 
 ## Suggested development tools

gulpfile.js

@@ -25,6 +25,7 @@ var watch = require('gulp-watch');
 var production = process.env.NODE_ENV === 'production';
 
 var config = {
+  source: './src',
   destination: './public',
   scripts: {
     source: './src/main.js',
@@ -112,6 +113,7 @@ gulp.task('styles', function() {
 
   pipeline = pipeline.pipe(stylus({
     'include css': true,
+    paths: ['node_modules', path.join(__dirname, config.source)],
     compress: production
   }))
   .on('error', handleError)

src/style.styl

@@ -4,4 +4,5 @@ body, html
   font 14px/1.4 'Helvetica Neue', Helvetica, Arial
   color #333
 
-@import './components/repository'
+@import 'components/repository'
+// @import 'bootstrap/dist/css/bootstrap.css'