vue项目中的~到底代表什么，为何我使用的时候会报错

Question

<style scoped rel="stylesheet/stylus">

@import "~common/stylus/variable"

  #app

    color:$color-theme

</style>

我在一些代码中看到有人这样使用，我猜测这可能是一种自动化的路径代替

但是我自己使用却报错了

必须换成

@import "./common/stylus/variable"

才能生效，我想知道这东西应该如何去使用

下面是报错提示

Answer 1

~应该是默认代表当前项目的更目录，需要在alias里面配置个别名，我直接上代码吧webpack.base.config.js文件里，我的scss文件都在common目录下面，所以在alias里配置了common别名：&nbsp; &nbsp; resolve: {&nbsp; &nbsp; &nbsp; &nbsp; extensions: ['.js', '.vue'],&nbsp; &nbsp; &nbsp; &nbsp; alias: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'vue': 'vue/dist/vue.esm.js',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'components': resolve('src/components'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'common': resolve('src/common'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'config': resolve('src/config'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'views': resolve('src/views')&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }引用scss的代码：<style scoped>&nbsp; &nbsp; @import "~common/sass/variables";&nbsp; &nbsp; @import "~common/sass/mixin";&nbsp; &nbsp; /* ... */</style>亲测可以，有问题留言。