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别名：

    resolve: {

        extensions: ['.js', '.vue'],

        alias: {

            'vue': 'vue/dist/vue.esm.js',

            'components': resolve('src/components'),

            'common': resolve('src/common'),

            'config': resolve('src/config'),

            'views': resolve('src/views')

        }

    }

引用scss的代码：

<style scoped>

    @import "~common/sass/variables";

    @import "~common/sass/mixin";

    /* ... */

</style>

亲测可以，有问题留言。