CODEWITHSUNDEEP
vue.js
stack
stack

Reputation: 841

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

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 ?

Upvotes: 0

Views: 4193

Answers (1)

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

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

Upvotes: 3

Related Questions