Ionic3背景图片仅在app.scss生效，start.scss不显示求助

这种情况大概率是SCSS编译时的路径上下文差异导致的——全局样式文件（app.scss）和页面组件样式文件（start.scss）在打包编译后，最终CSS文件的输出位置不同，相对路径的解析基准也就不一样了。

为什么app.scss里的路径能生效？ #

app.scss作为全局样式，编译后通常会输出到项目根目录附近的CSS文件中，../assets/imgs/pergamena.jpg这个相对路径刚好能正确指向src/assets/imgs下的图片。

为什么start.scss里改了路径还是不行？ #

页面组件的样式文件（比如start.scss）在Ionic/Angular的打包机制中，可能会被编译到对应页面的子目录下，这时候../../assets/imgs/pergamena.jpg的相对路径可能并没有指向正确的assets文件夹。你可以打开浏览器开发者工具，查看网络请求里图片的实际请求路径，会发现它指向了一个不存在的地址。

推荐的解决方法 #

最稳妥的是使用基于项目根目录的绝对路径，不管在哪个SCSS文件里写，都能正确找到图片：

.contenutoStart {
 background: url('/assets/imgs/pergamena.jpg') no-repeat center center fixed;
 background-size: cover;
}

这里的/代表项目打包后的根目录，而assets文件夹在打包后会被直接复制到根目录下，所以这个路径是可靠的。

另外也可以试试用~符号指向src目录（Ionic通常支持这种写法）：

.contenutoStart {
 background: url('~src/assets/imgs/pergamena.jpg') no-repeat center center fixed;
 background-size: cover;
}

这两种方法都能避免相对路径带来的上下文问题，在全局样式和组件样式中都能正常生效。

内容的提问来源于stack exchange，提问作者Iva Pesa