@import ‘./common/stylus/mixins.styl‘引起的一系列错误

@import './common/stylus/mixins.styl’引起的一系列错误

环境：vue-cli 4

• 代码：

<template>
  <div>
    <h1>App 组件</h1>
    <button class="btn btn1">按钮1</button>
    <button class="btn btn2">按钮2</button>
    <ul>
      <li @click="choose(index)" :class="{active: navIndex === index}" v-for="item,index in 20" :key="index">{{index+1}}</li>
    </ul>
  </div>
</template>

<script type='text/ecmascript-6'>
export default {
  data () {
    return {
      navIndex: 0
    }
  },
  methods:{
    choose(index){
      this.navIndex = index
    }
  }
}

</script>
<style lang="stylus" rel="stylesheet/stylus">
 @import '~common/stylus/mixins.styl'

  /*1. 定义变量 */
  $color = green
</style>

报错：

思维：路径没错啊，

1. 以为vue.config.js有问题，设置了resolve，‘common’:path.resolve(‘src/common’)，直接@import “common/stylus/mixins.styl” 引入，----》报错
2. 又以为是写的方式有问题，百度了一下有两种写法，还有一种@import url(),两种都试过了 —》报错
3. 接下来我以为安装的stylus和stylus-loader有问题，按网上的安装了相应的版本，报错
4. 唉，这就无语了，我就直接百度怎么在脚手架引入一个stylus文件，这说得很清楚，在组件，入口文件引入等，还是报错

【在vue-cli引入stylus文件的一系列方法】(https://www.jianshu.com/p/62b4b93d4c97)

解决方案：

正等我快要崩溃时，瞄了一眼文件，竟然mixins.styl文件在common文件夹下，我的天，眼瞎。。。

意外收获：

• @import '~common/stylus/mixin’中 ~ 的作用是啥？
• 在vue文件中，要引入相应的样式，经常会用到@import "common/stylus/mixin"这种写法，为什么会用到~？
• stylus-loader文档说：

It also lets you load a stylus file from a package installed in node_modules or if you add a modulesDirectories, like modulesDirectories: [‘node_modules’, ‘web_modules’, ‘bower_components’] option you could load from a folder like bower_components. To load files from a relative path leave off the ~ and @import ‘relative-styles/my-styles’; it.

• 答案：(只是听别网上的人说就是这个用法，本人并没有具体测试)
  这个 ~ 和webpack配置文件中alias有关，只有在webpack配置文件中配置了alias，设置了相应的别名路径，@import才能通过~别名来实现查找相应的文件