vue-cli环境中使用内部样式表import导入外部styl文件或css文件，vue-cli目录别名设置

在vue开发过程中如果使用内部样式表时，需要用import导入外部css或styl文件,

其引入方法分别为：

<style scoped>
    @import url('../../assets/reset.css');
</style>
<style lang="stylus" scoped>
    @import '~@/assets/varibles.styl'
</style>

注：其中@为根目录的别名，在build/webpack.base.conf.js文件里

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

目录别名

当然我们也可以定义自己的目录别名，如下添加了’styles’: resolve(‘src/assets/styles’),

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

如果我们要使用styles下面的styl文件，我们可以通过以下方法引入styl（假设your.styl文件完整路径为src/assets/styles/your.styl）

@import '~styles/your.styl'

即通过~加别名的方式