如何在vue.js中添加vue样式的加载器依赖项

Question

在我的项目中，我在src/components/header/中创建了一个新文件header.vue。代码是

<template>
  <div class="header">
    I am header!!
  </div>
</template>
<script type="text/ecmascript-6">
  export default({})
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>

我想在App.vue中使用它，下面是我的代码：

<template>
  <div id="app">
    <header></header>
  </div>
</template>

<script>
   import header from './components/header/header.vue'

  export default {
    components: {
      header: header
    }
  }
</script>

<style>
#app {
 .....
}

​

但我在控制台上有错误：

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

我发现“css-加载程序”："^0.28.0"，“已经在package.jsaon中了，所以我添加了

"stylus-loader": "^2.1.1",

转化为package.json。并重新启动"npm运行开发“

但不幸的是，它不起作用，它又失败了。谁能帮我？

Answer 1

1:通过执行以下命令，将stylus-loader添加为stylus-loader依赖项

npm install stylus stylus-loader --save-dev

2:将手写规则添加到webpack配置中

在build文件夹中找到webpack.base.conf.js并添加以下规则

module: {
  rules: [
    {
      test: /\.styl$/,
      loader: ['style-loader', 'css-loader', 'stylus-loader']
    }
  ]
}