vue webpack 打包处理stylus中图片的路径问题

Question

想要在一个组件的目录下引用assets文件目录下的图片，用了stylus
CSS如下：

    .icon
      display: inline-block
      vertical-align: top
      margin-top: 6px
      width: 30px
      height: 32px
      margin-right: 9px
      bg-image('assets/logo')
      background-size: 30px 32px

stylus:

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

在webpack中配置了alias

    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'api': resolve('src/api'),
      'assets' : resolve('src/assets')
    }

webpack打包时候报错，提示的信息如下，所以是编译到了当前目录下的assets下面的图片。如果我写相对路径的话是可以访问的到的，但是这样要去写../../这样比较麻烦。怎们样能通过alias这样快速访问？

 * ./assets/[e-mail] in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~
/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-66db4f00","scoped":true,"
hasInlineConfig":false}!./~/stylus-loader?{"sourceMap":false}!./~/vue-loader/lib/
selector.js?type=styles&index=0!

所以应该怎么样能访问到assets文件夹下的文件？

edit：
如果写绝对路径
/src/assets/logo
也拿不到。

Answer 1

前面加/src

Answer 2

看起来应该是stylus-loader在转译bg-image('assets/logo')的时候，生成出来的是url('./assets/logo')。导致非assets开头的路径webpack无法和alias中设置的assets做转换。

搜了一下，stylus-loader有个preferPathResolver配置参数专门用于解决webpack中定义resolver时遇到的问题。

module: {
    loaders: [
        { test: /\.styl$/, loader: ExtractTextPlugin.extract('style', 'css!postcss!stylus')  }                    
     ]
},
stylus: {
    preferPathResolver: 'webpack'
}

具体在https://github.com/shama/styl... 搜索preferPathResolver

Answer 3

如果文件不变，可以考虑将文件放到 /static/assets 目录下，然后路径写成 /static/assets

Answer 4

有可能因为大小写