AjaxMin bundle CSS with relative path

Question

I have CSS folder structure as below

-test1.css
-test2.css
-morestyles
 --test3.css

these css have image reference as relative path in same folder

test1.css have image reference as

background-image: url(../../../Assets/DefaultTheme/Images/test1.png);

test3.css have image reference as

background: url(../../../../Assets/DefaultTheme/Images/test2.png) 

I am bundling all these css to a single css mystyle.css with below config.xml

<root>
    <output path="../../Styles/Bundled/mystyle.css">
        <input path="../../Styles/DefaultTheme/Css/test1.css"/>
        <input path="../../Styles/DefaultTheme/Css/test2.css"/>
        <input path="../../Styles/DefaultTheme/Css/morestyles/test3.css"/>
    </output>
</root>

When I bundle using the below command in batch file

AjaxMin.exe -clobber -minify:false -xml config.xml -ignore:All -echo

My output mystyle.css now contain the test1.css's background as same as above which will now fail to fetch the image.

Any way to deal with relative path while bundling? Any Way to maintain relative path according to the output file folder?

Answer 1

You could try referencing the images by their location in relation to the root folder. You can achieve this by starting the url with '/'. This way it wouldn't matter where your css files are in relation to the images.

For more detail:

https://css-tricks.com/quick-reminder-about-file-paths/

https://www.w3schools.com/html/html_filepaths.asp