Include a stylus plugin in Vue.js project - vue.js

Question

I can't include a stylus plugin in my project, the code varies so much from one version to another that I'm lost trying everything and anything.
Here are the versions I currently have:
"nib": "^1.1.2",
"vue": "^2.5.16",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
// vue.config.js
const nib = require('nib');
module.exports = {
configureWebpack: {
stylus: {
use: [nib()],
import: ['nib'],
},
},
};
Has anyone succeeded?
I would like to understand how to do it and why what I do doesn't work, thank you.

Answer 1

Once I installed rupture this way using vue-cli:
const rupture = require('rupture')
module.exports = {
configureWebpack: {
css: {
loaderOptions: {
stylus: {
use: [rupture()]
}
}
}
}
}
I found the correct way to install nib:
module.exports = {
css: {
loaderOptions: {
stylus: {
use: [require('nib')()],
import: ['~nib/lib/nib/index.styl']
}
}
}
}

Answer 2

To use Stylus, you need to configure the css loader in your webpack config, add this to rules:
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
And install the style-loaders:
npm install --save-dev css-loader vue-style-loader
The css should then load and you have css processing in both our external assets and our single-file components.
One final change here to use stylus is to install the loader:
npm install --save-dev stylus stylus-loader
And add a rule:
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
}

Answer 3

Final solution:
In vue.config.js file
const path = require('path');
module.exports = {
css: {
loaderOptions: {
stylus: {
use: [
require('nib')(),
],
import: [
path.resolve(__dirname, './src/styles/nibFixes.styl'),
'~nib/lib/nib/index.styl',
],
},
},
},
};
In ./src/styles/nibFixes.styl file
// To fix https://github.com/stylus/nib/issues/312
flex-version = flex
support-for-ie = false
vendor-prefixes = official