在vue文件中@import引入外部stylus文件，為什么路徑前要加“~”，否則報錯？

1、已配置項目別名alias

resolve: {
    extensions: ['.js', '.vue', '.json', '.css', 'styl'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'base': resolve('src/components/base'),
      'assets': resolve('src/assets')
    }
  },

2、文件目錄

3、vue文件中引入stylus文件

<style lang="stylus" scoped>
@import 'assets/css/variable'
</style>

結(jié)果報錯

bundle has 1 errors
172:176 ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-be4708e4","scoped":true,"hasInlineConfig":false}!./~/stylus-loader?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/views/programs/Programs.vue
Module build failed: Error: 
   196| }
   197| </script>
   198| 
   199| <style lang="stylus" scoped>
   200| @import 'assets/css/variable'
----------------^
   201| 
   202| .search-wrapper

但是改成@import '~assets/css/variable'就不會報錯了，請問加~還不加有什么區(qū)別和原理？望賜教