• 4.6k

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

结果报错

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'就不会报错了,请问加~还不加有什么区别和原理?望赐教

阅读 3.3k
评论
    2 个回答
    • 1
    • 新人请关照
      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章