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

你可能感兴趣的:(vue)