Background Image Path in CSS Files - Liferay 6.2

Question

I am working with a Lifera migration project. The project was created in Liferay 6.1 , and now I'm moving on to Liferay 6.2.

I am facing a problem in the image path for all CSS files. Migrating to Liferay 6.2 , it adds the Theme folder path and CSS to all images.

Image path in Liferay 6.1: background:url(../../images/xyz.jpg)
Image path in Liferay 6.2: background:url(/myThemeName/css/../../images/xyz.jpg)

The project decoder is as follows:

  _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 

This product is huge and hard to update all background URLs.
Is it possible to get rid of "theme-name / css" from a path in CSS files.

Answer 1

I would suggest you just write code that will open the css file → read, and then find a property that matches → background: url () and just add the url with / myThemeNames / css /.

The part can be written in any language, php, python, java, C ++. Everything that is convenient for you. Even if you have 50 css files. You can just transfer the file names to filestream, and it should do it for you.

Let me know if you need help writing code.

Answer 2

Check this out: https://github.com/philidem/rewrite-css-urls

rewrite-css-urls is what I used in the past on larger sites (4000+ pages), where I ran into a similar problem. The following should go through the process:

Setting: npm install rewrite-css-urls --save

Using:

To find:

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

Find and replace:

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

If you need more information about its use and features, check out this post about it at NPMJS.com

I hope this can help in solving your problem!