If you are using bower as your package manager in your web application and you're also using SASS you're probably using the @import statements to build your CSS bundle.

Take the following example of a SASS main file:

/*
 * Import variables
 */
@import "vars.scss";

/*
 * Import bootstrap styles
 */
@import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

/*
 * Import fontawesome styles
 */
@import "../../../bower_components/components-font-awesome/scss/font-awesome.scss";

/*
 * Other libraries
 */
@import '../../../bower_components/intl-tel-input/build/css/intlTelInput.scss';
@import "../../../bower_components/angular-bootstrap-datetimepicker/src/css/datetimepicker.scss";

In this example, we are using bootstrap and font-awesome SAS' version along with intl-tel-input and angular-bootstrap-datetimepicker that were not written on SASS.

If we try to @import non SASS libraries, SASS compilation will compile that into a CSS @import, meaning that a new http request have to be made!

If we want to include the entire content of a CSS file we have to rename it to a .scss file. Using bower postintall scripts we can rename the files in order to use the SASS @import properly.

Using .bowerrc postinstall script

When installing your bower dependencies you can define a postintall script by defining it on your .bowerrc file, located on your project root directory.

An example of .bowerrc and a postinstallation script would be:

{
    "scripts": {
        "postinstall": "./.bower-postinstall"
    }
}

#!/bin/sh

# bower postinstallation script

cp bower_components/intl-tel-input/build/css/intlTelInput.css bower_components/intl-tel-input/build/css/intlTelInput.scss

cp bower_components/angular-bootstrap-datetimepicker/src/css/datetimepicker.css bower_components/angular-bootstrap-datetimepicker/src/css/datetimepicker.scss

Conclusion

This example will avoid you from extra CSS tasks, like cssmin, because your SASS main file will list all your CSS dependencies and their loading order.

Also, this allows you to include all your favourite CSS libraries and keeping a simple SASS compilation at the same time.

Oscar out.