There are multiple modules with names that only differ in casing in vue 3-CodePudding

I am working on Vue 3 application I am using SVG code as a background URL in sass.

$bg-image: url("data:image/svg xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'><path fill='#{$color}' d='M4.89557 6.49823L2.79487 4.26513C2.26967 3.70683 1.38251 3.70683 0.857309 4.26513C0.375593 4.77721 0.375593 5.57574 0.857309 6.08781L4.74989 10.2257C5.14476 10.6455 5.81176 10.6455 6.20663 10.2257L13.1427 2.85252C13.6244 2.34044 13.6244 1.54191 13.1427 1.02984C12.6175 0.471537 11.7303 0.471536 11.2051 1.02984L6.06096 6.49823C5.74506 6.83403 5.21146 6.83403 4.89557 6.49823Z'/></svg>");

So far everything was working fine but when I updated the vue version some additional vue related dependencies like vuex, eslint-plugin-vue, and others.

On npm run serve project serves correctly but I am started to get a warning below in my code.

warning  in data:image/svg xml,

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

CodePudding user response：

Changing the hex color from #FFFFFF to #ffffff solved the issue apparently.