CSS 中的图像路径支持 CDN
我正在尝试将我们的图像部署到 CDN。目前，CSS 具有我们网站上图像的相对路径。这些路径需要支持 CDN 图像位置。有人对我如何做到这一点有建议吗？
或者是否有人有关于部署到 CDN 的好教程。
这就是我最终完成此任务的方式。
- 我使用 SASS - http://sass-lang.com/
- 我有一个名为 cdn.scss 的混合内容就像 $image_path: "/images/";
- 以 sass 风格导入该 mixin @import "cdn.scss"
- 更新图像路径如下：background: url($image_path + "image.png");
- 在部署时，我更改 mixin.scss 中的 $image_path 变量，然后重新运行 sass
UPDATE
我们使用 bash 更新文件
cat > preprocess/sass/_cdn.scss <<EOT
\$image_path: "//CDN_URL/";
_cdn.scss 中的示例代码
$image_path: "/public/images/";
然后它在本地默认工作，但在生产推送时，我们运行 bash 脚本使用 cdn 位置更新
I am trying to deploy our images to a cdn. Currently the css has relative paths to images on our site. These paths will need to support the CDN image location. Does anyone have advice on how I can do this?
Or if anyone has a good tutorial on deploying to a CDN.
This is how I ended up accomplishing this.
- I used SASS - http://sass-lang.com/
- I have a mixin called cdn.scss with content like $image_path: "/images/";
- Import that mixin in the sass style @import "cdn.scss"
- Update image paths as such: background: url($image_path + "image.png");
- On deployment I change the $image_path variable in the mixin.scss and then rerun sass
UPDATE
We use bash to update the file
cat > preprocess/sass/_cdn.scss <<EOT
\$image_path: "//CDN_URL/";
Example code in the _cdn.scss
$image_path: "/public/images/";
Then it works by default locally, but on production push, we run the bash script to update using the cdn location
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
也许最简单的方法是将图像和 CSS 文件托管在 CDN 上。 CSS 文件中的图像路径是相对于 CSS 文件本身的，因此您根本不必更改 CSS。
如果这不是一个选项，您将不得不将完全限定的 URL 放入样式表中。现在，如果您确实愿意，您可以动态生成 CSS 文件，并执行一些替换，这样您实际上就不必在工作表中对 CDN 进行硬编码。
Probably the easiest thing would be to host both your images and CSS file on the CDN. Image paths in your CSS file are relative to the CSS file itself, so you won't have to change your CSS at all.
If that's not an option, you're stuck putting the fully qualified URLs in your stylesheet. Now, if you really wanted to, you could generate your CSS file dynamically on the fly, and perform some replacement so you don't actually have to hard code the CDN in your sheet.