webpack 2 and stylus-loader config file example

Question

I am stuck with getting stylus to work with webpack 2. I am trying to add the stylus loader module to my webpack.config, but I don't have a clue how to do that. I's not, that I haven't read the documentation:

https://github.com/shama/stylus-loader

At first glance this example code looks like a piece of cake (keep in mind, I am talking Webpack 2 here, NOT Webpack 1):

module: {
  rules: [
    {
      test: /\.styl$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'stylus-loader',
          options: {
            use: [stylus_plugin()],
          },
        },
      ],
    }
  ],
},

The problem here is the function stylus_plugin, which, according to the documentation, needs to be required via:

var stylus_plugin = require('stylus_plugin');

However there exists no such npm module as stylus_plugin in the npm repo.

So, maybe someone can help me with getting stylus running on webpack and maybe someone can even provide a config-example.

Addendum, February 9, 2017. This works for me (using stylus):

module: {
    rules: [{
        test: /\.styl$/i,
        use: [
            'style-loader',
            'css-loader',
            'stylus-loader'
        ]
    }]
}

For the sake of explicity: Each single loader represents a separate plugin. So you have to add each one on these three plugins via yarn/npm.

Swatch

I was totally off track. – Swatch

Thanks! The documentation is super unclear... – Byssus

OMG I have been trying to figure out why my loaders weren't working and your Addendum worked, literally spent hours on this. If anyone has issues with their loader set up, try this Addendum use: TYSM! – Heidi

Answer 1

So stupid! I didn't see that stylus_plugin was a generic placeholder name for stylus plugins. I should get me a coffee ...

Swatch