title: Stylus-loader is not compiling files in Webpack 3
body: <p>I'm trying to get Webpack to compile my stylus files, it's importing them all but it doesn't seem to be compiling anything into CSS.</p>
  
  <p>Here is my Webpack config file:</p>
  
  <pre><code>const webpack = require('webpack')
  const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const CleanWebpackPlugin = require('clean-webpack-plugin')
  const ExtractTextPlugin = require('extract-text-webpack-plugin')
  const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
  
  const jeet = require('jeet')
  const rupture = require('rupture')
  const autoprefixer = require('autoprefixer-stylus')
  
  module.exports = {
    entry: {
      app: './src/app.js',
      vendor: [
        'lodash'
      ]
    },
    devtool: 'inline-source-map',
    output: {
      // name will match each entry point above and 'chunkchash' will ensure each new build doesn't cache
      filename: '[name].[chunkhash].js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        // Process css styles
        {
          test: /\.styl$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              'css-loader', 'stylus-loader'
            ]
          })
        }
      ]
    },
    plugins: [
      // Delete old build so we have a fresh start each time
      new CleanWebpackPlugin(['dist']),
      // Process styles
      new webpack.LoaderOptionsPlugin({
        options: {
          stylus: {
            use: [
              jeet(),
              rupture(),
              autoprefixer({ browsers: ['&gt; 3%'] })
            ]
          },
          context: '/'
        }
      }),
      // Don't inject the styles as a style tag, extract them into core.css
      new ExtractTextPlugin('core.css'),
      // Generate all our site icons
      // Generate our HTML files for us
      new HtmlWebpackPlugin({
        template: './src/app.html',
        filename: 'index.html',
        inject: 'body'
      }),
      // Prevent unchanging modules from updating their hash
      new webpack.HashedModuleIdsPlugin(),
      // Put common vendor chunks into their own bundle
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor'
      }),
      // Put common internal chunks into their own bundle
      new webpack.optimize.CommonsChunkPlugin({
        name: 'common'
      })
    ]
  }
  </code></pre>
  
  <p>I've removed a few of the non-style related loaders for the sake of brevity and there are other non-styling related things in webpack.dev.js and webpack.prod.js.</p>
  
  <p>As other people have commented on other posts, the stylus-loader documentation is atrocious and I have looked at so many resources now I can't tell which parts are Webpack 1 and which parts are Webpack 2 or 3.</p>
  
  <p>I am using Webpack v3.6.0 by the way but if my problems can be resolved by switching to 2, I'm happy to do so.</p>