vue-cli stylus文件引入问题

Question

我想问下这个通过import导入“~”符号表示什么？

Answer 1

这个~是stylus配合webpack方便对于文件引入的语法糖(?)，作用是可以是用webpack的alias和扩展名配置以及默认index文件等等，具体说明在其文档中有，虽然有点难懂。
stylus的github文档

Answer 2

这个和 stylus 没关系，只要在 build 目录下的 webpack.base.conf.js 文件中 resolve 部分加入以下代码就可以了

resolve: {
    extensions: ['.js', '.vue', '.json'],
    // modules 就是要加入的内容
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      '@': resolve('src')
    }
  },

接下来就可以在 vue 文件中使用

<template>
 <img src="~assets/images/logo.png">
</template>

<style lang="scss">
  @import "~assets/styles/layout";
</style>