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

想要在一个组件的目录下引用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/logo@2x.png 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
也拿不到。

阅读 7.1k
4 个回答

看起来应该是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

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

有可能因为大小写

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题