Using a # (Hashtag) in a image name in scss/css

Question

Okay let's say i have an image named test#1234.png, while trying to import it as a:

background: url('./assets/test#1234.png')

I would get this error:

Module not found: Error: Can't resolve './assets/test'

So it wouldn't even read out the whole name in the error, I've tried escaping the hashtag like test/#1234 and also percent encoding it like test%231234 but still no luck, anyone got an idea of what could fix this problem?

NOTE: any other file name that doesn't contain a hashtag works.

Answer 1

It doesn't seem like this error is originating with SASS. Runing the sass command-line tool to compile a single SCSS file with a hashtag will work fine. In general, SASS does no checking of the filesystem to try and resolve paths, it only processes the syntax. The "module not found" error is being triggered by your build process, probably React.

Answer 2

The hashtag is a reserved character for URIs (which denotes the fragment).

According to RFC 3986 section 2.2 , the reserved characters are:

 reserved = gen-delims / sub-delims gen-delims = ":" / "/" / "?" / "#" / "[" / "]" / "@" sub-delims = "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="

And, importantly:

If data for a URI component would conflict with a reserved character's purpose as a delimiter, then the conflicting data must be percent-encoded before the URI is formed.

The percentage-encoding of the hastag comes out to %23 , so instead of
background: url('./assets/test#1234.png')

You would be looking to target:
background: url('./assets/test%231234.png')