Import svg filter for webpack - svg

Question

I have a react project which used an svg filter for rendering:
#use 'sass:math';
#import '../Theme.scss';
$borderW: 5px;
$borderR: 5px;
$numOfBlobs: 4;
.blob-btn {
z-index: 1;
position: relative;
padding: 20px 46px;
margin-bottom: 30px;
text-align: center;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
background-color: transparent;
outline: none;
border: none;
transition: color 0.5s;
cursor: pointer;
border-radius: $borderR;
color: $primary;
&:before {
content: '';
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: $borderW solid $primary;
border-radius: $borderR;
}
&:after {
content: '';
z-index: -2;
position: absolute;
left: $borderW * 1.5;
top: $borderW * 1.5;
width: 100%;
height: 100%;
transition: all 0.3s 0.2s;
border-radius: $borderR;
}
&:hover {
color: #ffffff;
border-radius: $borderR;
&:after {
transition: all 0.3s;
left: 0;
top: 0;
border-radius: $borderR;
}
}
&__inner {
z-index: -1;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: $borderR;
background: #ffffff;
}
// additional container created, because in FF blobs are breaking overflow:hidden of element with svg gooey filter
&__blobs {
position: relative;
display: block;
height: 100%;
filter: url('#goo');
}
&__blob {
position: absolute;
top: $borderW;
width: math.div(100%, $numOfBlobs);
height: 100%;
background: $primary;
border-radius: 100%;
transform: translate3d(0, 150%, 0) scale(1.7);
transition: transform 0.45s;
#supports (filter: url('#goo')) {
transform: translate3d(0, 150%, 0) scale(1.4);
}
#for $i from 1 through $numOfBlobs {
&:nth-child(#{$i}) {
left: ($i - 1) * math.div(120%, $numOfBlobs);
transition-delay: ($i - 1) * 0.08s;
}
}
.blob-btn:hover & {
transform: translateZ(0) scale(1.7);
#supports (filter: url('#goo')) {
transform: translateZ(0) scale(1.4);
}
}
}
}
.blob-btn-secondary {
#extend .blob-btn;
color: $secondary;
&:before {
border: $borderW solid $secondary;
}
}
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
style={{ display: 'none' }}
>
<defs>
<filter id="goo">
<feGaussianBlur
in="SourceGraphic"
result="blur"
stdDeviation="10"
></feGaussianBlur>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7"
result="goo"
></feColorMatrix>
<feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
</filter>
</defs>
</svg>
<button
class='blob-btn'}
style={{
padding: '15px',
margin: '15px',
width: '100%',
zIndex: 10,
filter: isHovered ? 'blur(2px)' : 'none',
// color: color,
}}
>
Coming Soon
<span className="blob-btn__inner">
<span className="blob-btn__blobs" style={{ filter: `url(#goo)` }}>
<span
className="blob-btn__blob"
style={{ background: color }}
></span>
<span
className="blob-btn__blob"
style={{ background: color }}
></span>
<span
className="blob-btn__blob"
style={{ background: color }}
></span>
<span
className="blob-btn__blob"
style={{ background: color }}
></span>
</span>
</span>
</button>
It works well when running withing snopack, but as soon as I try to bundle it looses the connection to goo svg. Trying with webpack, as well as the native snowpack bundler I get:
[16:56:29] [snowpack] Build failed with 1 error:
build/dist/components/PositionAwareButton.css:10837:14: error: Could
not resolve "/dist/components/#goo"
Any pointers on where I need to start looking are highly appreciated