How to add vue-style-loader dependency in vue.js - vue.js

Question

In my project, I created a new file header.vue in src/components/header/. The code is
<template>
<div class="header">
I am header!!
</div>
</template>
<script type="text/ecmascript-6">
export default({})
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
I want to use it in App.vue, Here is my code:
<template>
<div id="app">
<header></header>
</div>
</template>
<script>
import header from './components/header/header.vue'
export default {
components: {
header: header
}
}
</script>
<style>
#app {
.....
}
But i have got error in console:
This dependency was not found:
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-
loader/lib/style-compiler/index?{"vue":true,"id":"data-v-
12835cef","scoped":false,"hasInlineConfig":false}!stylus-loader?
{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?
type=styles&index=0!./header.vue in ./src/components/header/header.vue
I had found that ""css-loader": "^0.28.0"," is in package.jsaon already, So I added
"stylus-loader": "^2.1.1",
into package.json. and restarted "npm run dev"
But unlucky, it doesn't work, it failed again. Who can help me ?

Answer 1

1: Add stylus-loader as a dev dependency by executing the following command
npm install stylus stylus-loader --save-dev
2: Add the stylus rule to the webpack config
Locate the webpack.base.conf.js in the build folder and add the following rule
module: {
rules: [
{
test: /\.styl$/,
loader: ['style-loader', 'css-loader', 'stylus-loader']
}
]
}