当我们使用webpack打包应用程序的时候可以通过alias设置别名的方式避免类似于这种尴尬的局面require('../../path/to/foo')
。
如果我们设置了别名@
指向src
alias: {
@: path.resolve(__dirname, 'path/to/src')
}
我们就可以轻松引入src下的文件,假设我们有如下目录src>img>foo.png
就可以这样引入 require('@/img/foo.png')
,或者import '@/img/foo.png'
这种写法在js文件中是有效的,但是如果我们的css中需要插入背景图片,这个时候如何写图片地址呢?
.foo{
// 这种写法并不能成功解析,会构建出错
background: url('@/assets/img/foo.png')
}
通常我们的css是需要css-loader进行处理的,自然我们就会想到,如果想要在css中使用alias功能,那么必定是css-loader的支持。所以我们打开css-loader的 官方文档。
发现有如下描述:
To import assets from a node_modules path (include resolve.modules) and for alias, prefix it with a ~:
url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')
也就是说需要在alias前面加上一个~
号,让css-loader识别出这是一个alias。