How to add vue-style-loader dependency in 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 ?

Did you generate the vue project using vue-cli? If yes the which version of vue-cli? — Vamsi Krishna
– Vamsi Krishna, Commented Jul 12, 2018 at 8:41
@VamsiKrishna, yes, I used "npm install -g vue-cli" and "vue init webpack sell". The version of vue is 2.9.6 — stack
– stack, Commented Jul 12, 2018 at 8:44

Vamsi Krishna · Accepted Answer · 2018-07-12 09:49:24Z

3

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']
    }
  ]
}

edited Jul 12, 2018 at 9:49

answered Jul 12, 2018 at 8:53

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related