title: Getting Started With stylus-loader for Webpack
body: <p>Alright so (new to this):</p>
  
  <p>I  just added my <code>stylus-loader</code>, <code>style-loader</code> (as recommended by <code>stylus-loader</code>) and the loader <code>{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }</code> to the webpack config. Now on my Main.js file I'm adding <code>var css = require('!css!stylus!./Main.styl');</code>. So, should I be seeing the compiled css in the html now ? Not sure if I'm getting this right. </p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>webpackConfig = {
      context: __dirname,
      entry: {
          app: ['webpack/hot/dev-server','./index.js']
      },
      output: {
          path: __dirname,
          filename: 'bundle.js'
      },
      module: {
          loaders: [
              { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
              { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }
          ]
      }
  }
  
  module.exports = webpackConfig;
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>var React = require('react');
  var Main = require('./App/Components/Main');
  
  class App extends React.Component{
      render(){
          return (
              &lt;Main /&gt;
          )
      }   
  }
  
  React.render(&lt;App /&gt;, document.getElementById('main'));
  </code></pre>
  
  <p><strong>Main.js</strong></p>
  
  <pre><code>'use strict'
  
  import React from 'react';
  import ReactCanvas from 'react-canvas';
  var css = require('!css!stylus!./Main.styl'); 
  
  var {
      Surface
  } = ReactCanvas;
  
  class Main extends React.Component{
      constructor() {
          super();
          this.size = document.getElementById('main').getBoundingClientRect() 
      }
  
      render() {
          return (
              &lt;Surface top={0} left={0} width={this.size.width} height={this.size.height}&gt;
              &lt;/Surface&gt;
          )
      }
  }
  
  module.exports = Main
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;React Canvas&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;header&gt;
          &lt;h1&gt;React Canvas&lt;/h1&gt;
      &lt;/header&gt;
  
      &lt;div id="main"&gt;&lt;/div&gt;
  
      &lt;script src="http://localhost:8080/webpack-dev-server.js"&gt;&lt;/script&gt;
      &lt;script src="bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>