How to apply plugin for Stylus in Vue 2 project with webpack template

Question

I have a Vue2 project with Webpack template and I am using Stylus as CSS preprocessor (stylus, stylus-loader already installed and working).

I can not find a way to apply plugins for Stylus like rupture.

I tried to modify the options in build/utils.js for the stylus loader like so:

stylus: generateLoaders('stylus', {use: [require('rupture')()]}),
styl: generateLoaders('stylus', {use: [require('rupture')()]})

Also tried to import rupture from <style></style> tag in App.vue like:

@import 'rupture/rupture/index.styl' // also 'rupture/index.styl'

Also tried importing it from main.js but nothing worked so far.

Thanks in advance!

Answer 1

Well, I have come up with a solution which utilizes the import option of Stylus like so:

stylus: generateLoaders('stylus', {

  // unfortunately `use` option throws error
  // use: [require('nib')(), require('rupture')()]

  // import to the rescue
  import: [
    '~nib/index.styl',
    '~rupture/rupture/index.styl',
    path.resolve(__dirname, '../src/styles/cfg.styl')
  ]
}),

Note: If any path provided in the import option is incorrect the server silently falls into kind of hanging state and doesn't start - no errors are thrown.