CSS 文件中的背景图像路径 - Liferay 6.2

Posted 2023-02-23

【中文标题】CSS 文件中的背景图像路径 - Liferay 6.2

【英文标题】：Background image path in CSS files - Liferay 6.2

【发布时间】：2016-08-09 21:40:13

【问题描述】：

我正在处理 Lifera 迁移项目。项目是在 Liferay 6.1 中创建的，现在我正在迁移到 Liferay 6.2。

我在所有 CSS 文件的图像路径中都面临问题。在 Liferay 6.2 中迁移时，它会将主题和 CSS 文件夹路径附加到所有图像。

Liferay 6.1 中的图像路径： background:url(../../images/xyz.jpg)Liferay 6.2 中的图像路径： background:url(/myThemeName/css/../../images/xyz.jpg)

项目目录是这样的：

 _diffs
    |- CSS
       |- common
         |- module1.css
         |- module2.css
         |- module3.css
      |- library
         |- plugin1.css
         |- plugin2.css
         |- plugin3.css
      |- utility
         |- tool1.css
         |- tool2.css
         |- tool3.css
   |- images
      |- All Images
   |- js
      |- javascript files

这个产品很大，很难更新所有后台网址。 是否可以从 CSS 文件中的路径中删除“主题名称/css”。

【参考方案1】：

我建议您简单地编写一个可以打开 css 文件的代码 -> 读取然后找到一个匹配的属性 -> background:url() 并简单地将带有 /myThemeNames/css/ 的 url 附加到它。

可以用任何语言编写，php、python、java、c++。无论你觉得舒服。即使您有 50 个 css 文件。您可以简单地将文件名传递给文件流，它应该为您完成。

如果您在编写代码时需要任何帮助，请告诉我。

【讨论】：

是的，我知道，但是手动它会变成硬代码，如果将来主题名称得到更新，那么再次必须执行相同的 exersize。我正在寻找一些动态的解决方案。

【参考方案2】：

看看这个：https://github.com/philidem/rewrite-css-urls

rewrite-css-urls 是我过去在较大的网站（4000 多页）上使用过的东西，在那里我遇到了类似的问题。以下内容将引导您完成整个过程：

安装： npm install rewrite-css-urls --save

用法：

查找：

require('rewrite-css-urls').find(cssCode, function(urlRef) 
    console.log('Found URL: ' + urlRef.url);
);

查找和替换：

var transformedCssCode = require('rewrite-css-urls').findAndReplace(cssCode, 
    replaceUrl: function(urlRef) 
        return urlRef.url.replace('blah.com', 'mycompany.com');
    
);

如果您需要有关其使用和功能的任何其他信息，请在 NPMJS.com 上查看this post

我希望这可以帮助您解决问题！

【讨论】：

这个项目在 Liferay 6.2 中，我对这个 npm 有点陌生。并且 liferay 自己编译 CSS 文件。因此，即使我推送了 CSS 文件的编译版本。 Liferay 6.2 将缩小所有 CSS 文件并再次附加“主题路径”。