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.