时间戳

首页 > 解决方案 > 如何在 vue.js 中添加 vue-style-loader 依赖项

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

问题描述

在我的项目中，我在 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-loader": "^0.28.0"," 已经在 package.jsaon 中，所以我添加了

"stylus-loader": "^2.1.1",

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

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

标签： vue.js

解决方案

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

npm install stylus stylus-loader --save-dev

2：在 webpack 配置中添加 stylus 规则

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

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

推荐阅读