I am embedding SVG images in CSS with with data:image/svg+xml
scheme in order to reduce HTTP requests.
.youtube a {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 9.333l5.333 2.662-5.333 2.672v-5.334zm14-9.333v24h-24v-24h24zm-4 12c-.02-4.123-.323-5.7-2.923-5.877-2.403-.164-7.754-.163-10.153 0-2.598.177-2.904 1.747-2.924 5.877.02 4.123.323 5.7 2.923 5.877 2.399.163 7.75.164 10.153 0 2.598-.177 2.904-1.747 2.924-5.877z" fill="#ffffff"/></svg>');
}
Running yarn run build
works perfectly, however yarn run build:production
produces this error:
[14] (webpack)/buildin/global.js 509 bytes {0} [built]
WARNING in <theme_dir>/~/css-loader?-sourceMap!<theme_dir>/~/postcss-loader!<theme_dir>/~/resolve-url-loader?-sourceMap!<theme_dir>/~/sass-loader/lib/loader.js?-sourceMap!./styles/main.scss
(Emitted value instead of an instance of Error) resolve-url-loader cannot operate: CSS error
<theme_dir>/resources/assets/styles/main.scss:6:218868: property missing ':'
at error (<theme_dir>/epicenter/node_modules/css/lib/parse/index.js:62:15)