具有图像和线性渐变的多个背景的属性值无效

Question

我试图设置一个具有多个背景的选择元素（一个图像和一个线性渐变）。它在我开发过程中起作用，但出于某种原因，当它被推向生产时它停止了工作。

这是我开始使用的代码（在SCSS中）：

$select-arrow-uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkExMjY4NTZGRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkExMjY4NTcwRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTEyNjg1NkRFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTEyNjg1NkVFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4L3nSlAAAAm0lEQVR42mL4//8/AwinpKQowtjIGCguB2MzMQBBampqF5A6D6TNGJAAkG8DpK4C6UYQnxGo0xhInwRiZiD+CMRus2fPPgVVuB2IeYD4FxAbMoKMB0rEAjnzkTRUAnEXksJooAFrwIqhViYAqTlQDTAAVwh2Bkwxkob5UO5fII6AKQQBJmQPASUWAKlEqMJoZIVgQCi4kDFAgAEAFOFxgtML2dkAAAAASUVORK5CYII=';

select{
    background-color: #f5f5f5;
    background-image: url("#{$select-arrow-uri}");
    background-image: url("#{$select-arrow-uri}"), -webkit-linear-gradient(bottom, #e5e5e5 0%, #f5f5f5 100%);
    background-image: url("#{$select-arrow-uri}"), linear-gradient(#e5e5e5 0%, #f5f5f5 100%);
    background-position: 95% center;
    background-repeat: no-repeat;
}

这就是它在浏览器中的显示方式：

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkExMjY4NTZGRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkExMjY4NTcwRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTEyNjg1NkRFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTEyNjg1NkVFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4L3nSlAAAAm0lEQVR42mL4//8/AwinpKQowtjIGCguB2MzMQBBampqF5A6D6TNGJAAkG8DpK4C6UYQnxGo0xhInwRiZiD+CMRus2fPPgVVuB2IeYD4FxAbMoKMB0rEAjnzkTRUAnEXksJooAFrwIqhViYAqTlQDTAAVwh2Bkwxkob5UO5fII6AKQQBJmQPASUWAKlEqMJoZIVgQCi4kDFAgAEAFOFxgtML2dkAAAAASUVORK5CYII=) 95% center no-repeat,
linear,to bottom,#e5e5e5,#f5f5f5;

当我使用线性渐变删除背景图像规则时，它可以正常工作。它对-webkit-linear-gradient线没有任何问题，只是线性梯度线。

是否存在语法问题？ Sass可以编译怪异吗？是否有URI字符串问题？

请帮忙！谢谢！