问题
vue-cli 4.x版本生成的vue工程,已经自动帮我们配置好了webpack的css-loader【清单详见这里】,我们在vue的单文件组件中写scss样式的时候,有些属性,比如background-image,需要配置url,譬如:
background-image:url("/assets/img/background.jpg")
但是这样的写法,在webpack的css-loader是无法解析打包的。
分析
这是由于css loader 会把非根路径的url解析为相对路径,加~
前缀才解析为模块路径,所以有两种思路可以解决该问题,一是采用相对路径,即当前的单文件组件相对于background.jpg
的路径:即../../assets/img/background.jpg
,而是采用绝对路径,上述的写法看似绝对路径,但是没有指定publicPath,默认vue-cli配置的publicPath为/src
,别名为@
,所以正确的绝对路径为@/assets/img/background.jpg
,但是在scss中@
是变量定义的前缀,所以需要加上~
以示区分。
解决
第一种思路:
background-image:url("../../assets/img/background.jpg")
第二种思路:
background-image:url("~@/assets/img/background.jpg")