AjaxMin 将 CSS 与相对路径捆绑在一起答案

【问题标题】：AjaxMin bundle CSS with relative pathAjaxMin 将 CSS 与相对路径捆绑在一起
【发布时间】：2019-08-11 09:38:56
【问题描述】：

我的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 捆绑到一个带有以下 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 的背景，现在将无法获取图像。

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

【问题讨论】：

标签： css bundle bundling-and-minification microsoft-ajax-minifier ajaxmin

【解决方案1】：

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

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

【讨论】：