在SCSS/CSS中使用#(主题标签)中的#(主题标签)

发布于 2025-02-11 16:47:59 字数 324 浏览 0 评论 0原文

好的,假设我有一个名为test#1234.png的图像,试图将其导入A:

背景:url('./ Assets/test#1234.png')

我会得到此错误:

找不到模块:错误:无法解析'./assets/test'

因此它甚至都不会在错误中读取全名,我尝试逃脱诸如test/#1234的主题标签,也尝试像以百分比一样编码。测试%231234,但仍然没有运气,有人知道什么可以解决此问题?

注意:任何其他不包含主题标签的文件名。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

苹果你个爱泡泡 2025-02-18 16:47:59

似乎这个错误并非源于Sass。运行sass命令行工具以使用主题标签编译单个SCSS文件将正常工作。通常,SASS不会检查文件系统以尝试解决路径,而仅处理语法。您的构建过程触发了“未找到的模块”错误,可能会做出反应。

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.

怪我太投入 2025-02-18 16:47:59

主题标签是uris的保留字符(表示片段)。

根据 rfc 3986 第2.2节,保留的字符为:

 保留= gen-delims / sub-delims

gen-delims =“:” /“ /” /“?” /“#” /“ [“ /”]“ /”@”

sub-delims =“!” /“ $” /“&” /“'” /“(“ /”)”
            /“*” /“+” /“,” /“;” /“ =”
 

而且,重要的是:

如果URI组件的数据将与保留角色作为定界符的目的相抵触,则在形成URI之前,必须对矛盾的数据进行分配


Hastag的百分比编码为%23,因此而不是
背景:url('./ Assets/test#1234.png')

您将寻找目标:
背景:url('./ Assets/test%231234.png ')

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  = "!" / "
quot; / "&" / "'" / "(" / ")"
            / "*" / "+" / "," / ";" / "="

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')

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文