webpack 解析样式（手写笔）的别名以及 vue.js 组件

Question

在我的 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 component 中使用像这样的其他组件：

import 'component/path/to/MyComponent'

不必想知道我可能在我的组件树中的什么位置。

我希望你拥有与 styles 相同的容量，尤其是 `stylus``

假设我有一个 stylus file' insrc/assets/funcs.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 解析和别名功能。这将避免在大型项目中很难找到我在深层组件中可能需要的手写笔混合和功能的错误。

他们有这样做的方法吗？
它必须是功能请求吗？在 webpack 上？在 vue-style-loader 上？在 stylus-loader 上？

任何精度将不胜感激;-)

塞布

Answer 1

你应该使用

@import '~assets/funcs';

webpack 解析样式（手写笔）的别名以及 vue.js 组件

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

stylus

webpack

vue.js

webpack-style-loader