Vue-loader: How can I use axis while loading stylus.

[NextSeason]

I want to use axis as the basic library for compiling my stylus code that was written in ".vue" files.
But it seems not using the axis while compiling the stylus part.

my config file:

    {
            test : /\.vue$/,
            loader : 'vue-loader',
            options :  {
                loaders : [ {
                    stylus : {
                        test : /\.styl(us)?(\?.*)?$/,
                        loader : 'stylus-loader',
                        options : {
                            use : [ axis() ]
                        }
                    }
                } ]
            },
            include : [ settings.src ]
     }

How shall I modify it to make it work?

[LinusBorg]

Bad news: you can't. vue-loader converts config to the string-based version (vue-style-loader!css-loader!stylus-loader), so any config that is not serializable (like axis()) will be lost.

This is a known issue and might be changed in the future, but it's not an easy, quick change so it might take quite a while to arrive.

[LinusBorg]

Okay, maybe there is a way with the LoaderOptionsPlugin()

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      stylus: {
        use: [axis()]
      }
    })
  }
]

That option is also mentioned in the stylus-loader README:
https://github.com/shama/stylus-loader#stylus-plugins (further down in the section about webpack2)

...but I haven't tested this in conjunction with vue-loader.

Oh, stylus-loader even got a convenience plugin wrapping that Plugin and making the code a bit smaller:

plugins: [
  new stylusLoader.OptionsPlugin({
    default: {
      use: [axis()],
    },
  }),
],

[NextSeason]

@LinusBorg Thank you very much. It works for me.