Webpack 网页包解析vue.js组件中样式（手写笔）的别名

在我的

webpack.config.js

文件中的

vue.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组件中使用以下类似的其他组件：

import 'component/path/to/MyComponent'

不必怀疑我可能会在我的组件树中的什么位置

我希望你在
风格方面有同样的能力，尤其是在“手写笔”方面``

假设我确实有
src/assets/funcs.styl中的
stylus文件：

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"

使用适用于js文件的
webpack
解析和别名功能。
这将避免在大型项目中难以发现的手写笔混音和功能bug，而这些都是我在深层组件中可能需要的

这是一种方法吗？

它必须是功能请求吗？在
网页上
？在
vue样式加载程序上
？在
触针加载器上

任何精度都将不胜感激；-）

Seb
您应该使用

@导入“~assets/funcs”

@import "assets/funcs"