How can I concatenate CSS files using @import?

Question

We are building a large website that requires very modular CSS. The problem is that we like to use the @import operator, because it is very clean, but the main drawback is performance (all links to CSS files are loaded synchronously, i.e. not parallel).

Does anyone know how to use PHP (or even .htaccess) to find any CSS files referenced via @import and then generate a single CSS file?

I looked at a lot of examples (some of which are visible here): http://robertnyman.com/2010/01/19/tools-for-concatenating-and-minifying-css-and-javascript-files-in-different-development- environments / , but none of them work with @import .

Thanks.

Answer 1

Less can be done with this: http://lesscss.org/#-importing

Maybe sass as well, but I'm not sure

Answer 2

Using assetic to control CSS and JavaScript does wonders. It is offered by default when using Symfony2, but can be used as a separate library in PHP. If used correctly, it will allow you to use your files in the original format during debugging and concatenation / minimization of everything in the production process.

https://github.com/kriswallsmith/assetic

I had no problems with @import.

It will also allow you to use these alternative CSS languages ​​if that’s what you do.

Answer 3

use a compass. It will compile all your styles into one file.

compass-style.org

Answer 4

You can use the version of PHP LESS. It will handle the styles in the style file and imported into a single file inside the server itself. You can minimize it. Then save it in the cache. This will allow the LessPHP compiler to see if the processed file was already in the cache and if any of the associated stylesheets were modified. If nothing has changed, it will simply return the file in cache style. The only difference you need to make in the markup is to change the .css to .less in the <link> . It will also help you write LESS css, which is a bonus.

Detailed documentation on how to install LessPHP, autocompile and cache LESS files is given on the official website and on GITHub .