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

我发现package.jsaon中已经包含““ css-loader”：“ ^ 0.28.0”，“，所以我添加了

"stylus-loader": "^2.1.1",

进入package.json。然后重新启动“ npm run dev”

但是不幸的是，它不起作用，再次失败。谁可以帮助我？

Answer 1

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

npm install stylus stylus-loader --save-dev

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

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

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

如何在vue.js中添加vue-style-loader依赖项

1 个答案: