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

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

Answer 1

您可以尝试通过图像相对于根文件夹的位置进行引用。您可以通过以'/'开头的url来实现。这样，您的css文件与图像的位置无关紧要。

更多信息：

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

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

AjaxMin捆绑带有相对路径的CSS

1 个答案: