想要在一个组件的目录下引用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
也拿不到。
前面加/src