SassError: $string: #457b9d is not a string.

[dwjohnston]

Describe the bug
When trying to use rpl-header, get an issue relating to sass.

To Reproduce
Repro as of this commit: dwjohnston/vic-gov-data-graph-take-2@64cbcb3

Steps:

1. Set up a vue project using the VUE cli and use the basic vue 2 setup.

2. Add variables.scss, update vue.config, as per: https://github.com/dpc-sdp/ripple/tree/master/examples/vue-example-app

3. Update the vue config as per: Packages appear to have untranspiled optional chaining ('?.') operator.  #1069

Expected behaviour
The code runs.

Actual behaviour
We get this error message in the browser:

cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/sass-resources-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/@dpc-sdp/ripple-form/index.vue?vue&type=style&index=0&lang=scss&:1 Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $string: #457b9d is not a string.
    ╷
208 │ $rpl-form-input-search-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.99 9.243c1.597-2.45 1.224-5.82-1.133-7.833C7.59-.526 4.137-.46 1.94 1.557a6 6 0 00-.19 8.653c2.043 2.045 5.205 2.293 7.527.757.031-.02.102-.083.198-.173l4.343 4.195a.941.941 0 101.308-1.354l-4.324-4.176c.098-.106.166-.184.188-.216zm-8.023-.25a4.274 4.274 0 010-6.035 4.266 4.266 0 016.03 0 4.274 4.274 0 010 6.034 4.266 4.266 0 01-6.03 0z' fill='%23#{str-slice(quote($rpl-form-input-prepend-icon-color), 2)}'/%3E%3C/svg%3E");
    │                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/@dpc-sdp/ripple-form/index.vue 208:537  root stylesheet
    at eval (cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/sass-resources-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/@dpc-sdp/ripple-form/index.vue?vue&type=style&index=0&lang=scss&:1)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/sass-resources-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/@dpc-sdp/ripple-form/index.vue?vue&type=style&index=0&lang=scss& (chunk-vendors.js:9012)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (index.vue?71ae:4)
    at Object../node_modules/vue-style-loader/index.js?!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/sass-resources-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/@dpc-sdp/ripple-form/index.vue?vue&type=style&index=0&lang=scss& (chunk-vendors.js:14921)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (index.vue?4790:1)
    at Module../node_modules/@dpc-sdp/ripple-form/index.vue?vue&type=style&index=0&lang=scss& (chunk-vendors.js:2507)

[chris-gooley]

Did you ever find a workaround for this?

[dwjohnston]

@chris-gooley I can't remember, looking at my interview submission - it looks like I found it too frustrating to use and I didn't. https://github.com/dwjohnston/vic-gov-data-graph-take-2/blob/3390bbb590f7a9e52e52a9207c9cc652dadfd193/README.md