我正在寻找一种使用
虽然我可以使用
我现在对任何解决方案都持开放态度,甚至使用 SASS 和一些自定义函数来重写任何 URL 并将其替换为完整路径。
为了更清楚地说明我的问题,这里是一个示例以及我想要解决它的方式:
最好的选择显然是如果
感谢任何建议。
更新1:
抱歉,答案都很好,但没有上下文,很难回答这个问题。让我解释一下:我正在使用一个软件(node-webkit)在本地运行一个“网站”(好吧,它是一个应用程序)。这更或多或少是一个自定义的chromium实例,具有一些附加功能。
最大的问题是node-webkit使用file:///协议,因此,是的,文件协议的根路径实际上是您的操作系统的根目录,Windows上的C:/,unix系统上的/,这不是直接的问题,因为这是一个本地应用程序(用户必须以某种方式安装它,我已经访问了这个系统)。
第二个问题是当你将应用程序打包成一个单独的文件时,当用户运行它时,它会被解压缩到一个临时目录中,以通过file:///协议实际运行网站,类似于/tmp/randomnumber/index.html。
因此,使用
我有哪些选择?在这种情况下,JavaScript选项并不像你想象的那样糟糕。另一个想法是运行一个非常小的Web服务器,它只需要提供静态内容,但是这需要是可移植的、跨平台的,并且不需要安装。
我认为可以通过基本的HTML和CSS来解决这个问题,但看起来不行,虽然我可以通过JavaScript动态添加“base”标签,但CSS没有类似的东西。
/
引用“自定义”URL的方法。我正在使用类似本地浏览器的东西,而 /
路径引用到 / Unix 路径(是的,操作系统根路径!),这绝对不是我的文件所在的位置。虽然我可以使用
<base>
在 HTML 中解决这个问题,但我不知道这是否也适用于 CSS 的 URL(),或者是否有类似的东西允许我指定完整的 URL。我现在对任何解决方案都持开放态度,甚至使用 SASS 和一些自定义函数来重写任何 URL 并将其替换为完整路径。
为了更清楚地说明我的问题,这里是一个示例以及我想要解决它的方式:
/mnt/projects/web/myproject/index.html
...
<base href="/mnt/projects/web/myproject/" />
...
/mnt/projects/web/myproject/style.scss
$base_url: "/path_to_root_folder_dinamically_fetched_on_client_pc/";
body
{
background-image: url("#{$base_url}mydir/myimage.png");
}
最好的选择显然是如果
url(/mydir/myimage.png)
起作用,但通过网络阅读我明白它不起作用。感谢任何建议。
更新1:
抱歉,答案都很好,但没有上下文,很难回答这个问题。让我解释一下:我正在使用一个软件(node-webkit)在本地运行一个“网站”(好吧,它是一个应用程序)。这更或多或少是一个自定义的chromium实例,具有一些附加功能。
最大的问题是node-webkit使用file:///协议,因此,是的,文件协议的根路径实际上是您的操作系统的根目录,Windows上的C:/,unix系统上的/,这不是直接的问题,因为这是一个本地应用程序(用户必须以某种方式安装它,我已经访问了这个系统)。
第二个问题是当你将应用程序打包成一个单独的文件时,当用户运行它时,它会被解压缩到一个临时目录中,以通过file:///协议实际运行网站,类似于/tmp/randomnumber/index.html。
因此,使用
/
不是一个有效的选项,然而由于我的样式表已经足够复杂(这是一个复杂的应用程序,我有类似layouts/something.css main.css和类似的东西),对于每个URL都必须重写../是一个大问题。我有哪些选择?在这种情况下,JavaScript选项并不像你想象的那样糟糕。另一个想法是运行一个非常小的Web服务器,它只需要提供静态内容,但是这需要是可移植的、跨平台的,并且不需要安装。
我认为可以通过基本的HTML和CSS来解决这个问题,但看起来不行,虽然我可以通过JavaScript动态添加“base”标签,但CSS没有类似的东西。