webpack还在vue.js组件中解析样式(手写笔)的别名

Question

在我的vue.js文件中的一个webpack.config.js项目中，我确实拥有以下内容：

///...,
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.common.js',
    'assets': path.resolve(__dirname, './src/assets'),
    'components': path.resolve(__dirname, './src/components')
  }
},
// ....

它允许我在任何Vue component中使用以下其他组件：

import 'component/path/to/MyComponent'

不需要想知道我在组件树中的位置。

我希望你对styles有同样的能力，特别是对“”

假设我确实有一个stylus file' insrc/assets/funcs.styl s.styl：

add(a)
  a + a

以及src/components/a/very/long/path/MyComponent.vue中的一个组件

<template>
  <div id="my-component">
    <h1>{{ msg }}</h1>
  </div
</template>

<script>

export default {
  name: 'my-component',
  data () {
    return {
      msg: 'A title'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../../../../../assets/funcs.styl"

h1
 margin add(30px)

</style>

我希望能取代这条线

@import "../../../../../../assets/funcs.styl"

通过这个

@import "assets/funcs"

使用用于js文件的webpack解析和别名特性非常好。这将避免在大型项目中很难找到我在深组件中可能需要的手写笔混合和函数中的bug。

他们是这样做的吗？

它必须是一个功能请求吗？在webpack上？在vue-style-loader上？在stylus-loader上？

(如有任何精确资料，将不胜感激；)

塞布

Answer 1

你应该用

@导入“~资产/功能”；