webpack resolve alias for styles(stylus) as well in vue.js components

Question

On a vue.jsproject in my webpack.config.jsfile i do have this:

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

which is allowing me in any Vue component to use other components like this:

import 'component/path/to/MyComponent'

not having to wonder where i might in my components tree.

I wish ya have the same capacity with stylesand particularly with `stylus``

Let say i do have a stylus file' insrc/assets/funcs.styl:

add(a)
  a + a

and a component in let say 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>

I wish to be able to replace this line

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

by this

@import "assets/funcs"

using the webpack resolve and alias feature that works great for js files. That would avoid hard to find bugs in big projects for stylus mixins and functions that i might need in deep components.

Is their a way to do so?
Does it have to be a feature request? on webpack? on vue-style-loader? on stylus-loader?

any precision would be greatly appreciated ;-)

Seb

Answer 1

You should use

@import '~assets/funcs';