vue-cli 4.x版本生成的工程，SCSS样式问题

问题

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")