Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

webpack 2 and stylus-loader config file example

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.

like image 362
LongHike Avatar asked Jan 25 '17 11:01

LongHike


1 Answers

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

like image 106
LongHike Avatar answered Sep 28 '22 06:09

LongHike