CODEWITHSUNDEEP
css
bingjie2680
bingjie2680

Reputation: 7773

combine imported css files

I have a style sheet file which imports three other css files:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

style.css contains:

@import url("../ins/style.css");
@import url("commerce/css/style.css");
@import url("../in/custom.css");

I would like to improve the loading time and reduce the number of requests, so I want to combine the three css files into one in the same order as they are imported. but problem arise that all layout is messed up. I am really wondering why this is happening since import css file is the same as inlcuding them. any ideas? thanks for taking time to read.

Upvotes: 1

Views: 1210

Answers (2)

Vadim Makeev
Vadim Makeev

Reputation: 135

You can try SSI includes, H5BP ant build script or even borschik to combine your CSS.

Upvotes: 0

PAULDAWG
PAULDAWG

Reputation: 790

If commerce/css/style.css is the CSS file that holds the layout, it could be that that path is not correct for all pages. I would ensure that all paths are relative to root to ensure that they are correct across the site. This includes the original href url for your combination css file.

I'm also not so sure if putting three imports in one css is less time for loading as opposed to linking them in the html. If you want to reduce load time you need to reduce number of loads somehow such as only loading internet explorer css when the browser is internet explorer etc.

Let me know of anymore developments.

Upvotes: 1

Related Questions