Webpack 2 and plugin loading

[igl]

Problem

Using the options object (stylus: { ... }) in webpack2 fails. They validate the config with a schema now.

Invalid configuration object.
Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'stylus'....

Fix

Loaders should be updated to allow passing options via loader options in module.rules.

and/or

allow strings passed to use. Like: stylus?use=nib

Workaround 1

My workaround was to use the loader-string to inject options: stylus-loader?' + JSON.stringify(stylusOpts)

This works nicely however i can't use "use" this way:

Module build failed: Error: Plugin should be a function

Workaround 2

Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: {
new webpack.LoaderOptionsPlugin({
  options: {
    stylus: ...
  }
})

[skolmer]

I have tried to use the UseEntry options property as described in https://webpack.js.org/configuration/module/#useentry

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

Unfortunately the option property seems to get serialized and the function I'm trying to pass is received as null. Module build failed: Error: Plugin should be a function

This might help to find a fix: webpack-contrib/postcss-loader#104

[icflorescu]

@shama, maybe you should create a label webpack2 or something like that for this kind of issues.

Just bumped into a similar problem and found a solution, so I'll post it here for the benefit of the community.

Using webpack@2.1.0-beta.25, I wanted to skip post-css and just use stylus-loader with the autoprefixer-stylus plugin:

use: [autoprefixer({ browsers: ['> 3%'] })]

Starting from Workaround 2 provided above by @igl, I ended up with this working solution, thanks to @phairoh:

new webpack.LoaderOptionsPlugin({
  options: {
    stylus: {
      use: [autoprefixer({ browsers: ['> 3%'] })]
    },
    context: '/'
  }
}),

Note the necessary context option.

See related discussions here and here.

[mzgoddard]

I altered the loader in #154 a little so you can use LoaderOptionsPlugin or OptionsPlugin in stylus-loader (a convenience wrapper for LoaderOptionsPlugin) to set stylus on the loader context instead of options. Using stylus you instead of options you should be able to use this with any set of loaders. Since LoaderOptionsPlugin writes to the loader context used by all loaders for a module, this should help from using LoaderOptionsPlugin being more complicated.

[Phunky]

I've been struggling to figure out how to define my import options with webpack 2, i've attempted to use the stylusOptions method as mentioned in the docs but it does not seem to work.

I'm doing this via nuxt.js and initially thought it was something on their end and raised a ticket, but i've not been able to find anything in general about defining options for stylus-loader with webpack 2.

Could anyone point me in the right direction please?

[insin]

If you add a unique ident property to your options, they won't get serialised.

https://webpack.js.org/guides/migrating/#complex-options

Example here: webpack-contrib/extract-text-webpack-plugin#265 (comment)