CSS中的图像路径以支持CD​​N

CSS

番长樱梅

2020-04-03

我正在尝试将映像部署到CDN。目前,css在我们的网站上具有图像的相对路径。这些路径将需要支持CDN映像位置。有人对我该如何做有建议吗?

或者,如果有人对部署到CDN有很好的教程。


这就是我最终完成此工作的方式。

  1. 我使用了SASS- http: //sass-lang.com/
  2. 我有一个名为cdn.scss的混合文件,其内容类似于$ image_path:“ / images /”;
  3. 以Sass风格导入该mixin @import“ cdn.scss”
  4. 这样更新图像路径:background:url($ image_path +“ image.png”);
  5. 在部署时,我在mixin.scss中更改$ image_path变量,然后重新运行sass

更新

我们使用bash更新文件

cat > preprocess/sass/_cdn.scss <<EOT
\$image_path: "//CDN_URL/";

_cdn.scss中的示例代码

$image_path: "/public/images/";

然后默认情况下在本地工作,但是在生产推送时,我们运行bash脚本以使用cdn位置进行更新

第4022篇《CSS中的图像路径以支持CD​​N》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
凯村村乐 2020.04.03

可能最简单的方法是将图像和CSS文件都托管在CDN上。CSS文件中的图像路径是相对于CSS文件本身的,因此您根本不必更改CSS。

如果这不是一种选择,那么您将不得不在样式表中放入完全限定的URL。现在,如果您确实愿意,则可以动态地动态生成CSS文件,并执行一些替换操作,因此实际上不必在工作表中对CDN进行硬编码。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android