vue stylus的安装及使用方法(报错问题处理)

首先原网站：https://stylus-lang.com/docs/mixins.html

一、安装stylus

cnpm install stylus --save-dev

二、安装完成截图

三、查看安装成功

stylus -V

四、安装stylus-loader

cnpm install stylus stylus-loader --save-dev

五、修改webpack.base.conf.js

{
        test:/.scss$/,
        loader:'style-loader!css-loader!scss-loader'
      },
      {
        test:/\.css$/,
        loader:'style-loader!css-loader!stylus-loader'
      }

六、修改package.json

    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",

七、使用

<template>
  <div id="app">
    <div class="menu">
      <h1>这是一行文字</h1>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
#app
  font-family: 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-align: center
  color: #2c3e50
  margin-top: 60px
  .menu
    color :red

</style>

效果截图

备注：正常安装以后，应该就可以使用，步骤五、六也许可以省去。
如果经过了这几步，控制台一直报错。可以删除node_modules文件，重新执行 npm install