vue-cli stylus文件引入问题

菜lee
  • 731

clipboard.png
我想问下这个通过import导入“~”符号表示什么?

回复
阅读 2.9k
2 个回答
✓ 已被采纳

这个~stylus配合webpack方便对于文件引入的语法糖(?),作用是可以是用webpack的alias和扩展名配置以及默认index文件等等,具体说明在其文档中有,虽然有点难懂。
stylus的github文档

这个和 stylus 没关系,只要在 build 目录下的 webpack.base.conf.js 文件中 resolve 部分加入以下代码就可以了

resolve: {
    extensions: ['.js', '.vue', '.json'],
    // modules 就是要加入的内容
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      '@': resolve('src')
    }
  },

接下来就可以在 vue 文件中使用

<template>
 <img src="~assets/images/logo.png">
</template>

<style lang="scss">
  @import "~assets/styles/layout";
</style>
宣传栏