css - AjaxMin 将 CSS 与相对路径 bundle 在一起

Question

我的 CSS 文件夹结构如下

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

这些 css 将图像引用作为同一文件夹中的相对路径

test1.css 有图像引用作为

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

test3.css 有图片引用

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

我将所有这些 css bundle 到一个带有以下 config.xml 的 css mystyle.css

<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>

当我在批处理文件中使用以下命令 bundle 时

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

我的输出 mystyle.css 现在包含与上面相同的 test1.css 的背景，现在将无法获取图像。

有什么方法可以在 bundle 时处理相对路径？有什么方法可以根据输出文件夹维护相对路径？

Answer 1

您可以尝试通过图像相对于根文件夹的位置来引用图像。您可以通过以“/”开头的 url 来实现此目的。这样，您的 css 文件相对于图像的位置就无关紧要了。

更多详情:

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

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