酱油小生在vue中想回家捡垃圾系列之在vue2.0中stylus的使用

首先安装stylus相关包和依赖

			npm install stylus stylus --save-dev
			npm install stylus stylus-loader --save-dev

为了方便在style引入stylus，在build/webpack.base.conf.js进行路径配置

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
       'src': resolve('src'),
        '@': resolve('src'),
        'common':resolve('src/common') ,
    }
  },

在App.vue中使用

<style scoped lang="stylus">
  @import "~common/stylus/variable"

  #app
    color:$color-theme
</style>

在npm run dev 的时候发生了加载不了的问题，哭了

Terminal打印了这个问题

挣扎了半小时，原来是包依赖的时候webpack版本跟不上！！
我是stylus-loader一开始是4.0版本，但是我的webpack是 3.0版本（要是不知道自己的版本号，webpack可以在cmd直接webpack -v，stylus直接查看项目的package.json配置文件中查找 “devDependencies”

解决办法有三个：

1. 要么重新安装把webpack卸载再安装最新版本的.

    全局卸载：npm  uninstall  webpack  -g
    重新安装：npm install webpack -g（@2.9.7是目前最稳定的版本）
   

2. 要么重新安装stylus-loader比小于等于3.0版本的

    重新安装指定的版本号：npm install stylus-loader@（版本号） --save-dev
   

3. 把webpackpack和stylus-loader都重新安装最新版本号

    		全局卸载：npm  uninstall  webpack  -g
    		重新安装：npm install webpack -g
    		重新安装最新的版本号：npm install stylus-loader --save-dev