在vue文件中@import引入外部stylus文件，为什么路径前要加“~”，否则报错？

Question

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 scoped>

@import 'assets/css/variable'

</style>

结果报错

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 scoped>

   200| @import 'assets/css/variable'

----------------^

   201| 

   202| .search-wrapper

但是改成@import '~assets/css/variable'就不会报错了，请问加~还不加有什么区别和原理？望赐教

Answer 1

~ 是 stylus-loader 到东东，参考&nbsp;https://github.com/shama/styl...~common 表示相对 common，然后我们在 webpack 配置了 common 的 alias，就能找到了它的路径了大神的回答