Currently, I am diving into the world of Sass and I am truly impressed by its simplicity. However, I have encountered a hurdle when it comes to compiling and importing my styles.
Whenever I look at my style.css file, I notice that it includes not only the styling from Bootstrap Framework but also other third-party CSS files.
Below is my setup, and I would greatly appreciate any insights or suggestions you may have:
styles.scss
// Import Bootstrap Compass integration
@import "bootstrap-compass";
// Import custom Bootstrap variables
@import "bootstrap-variables";
// Import Bootstrap for Sass
@import "bootstrap";
// Import Font Awesome
@import "font-awesome-compass";
@import "font-awesome";
// sass breakpoint
@import "../assets/bower_components/breakpoint-sass/stylesheets/_breakpoint.scss";
mystyles.scss
@import 'styles';
@import 'mystyles-mixins';
@import 'mystyles-variables';
.... my custom styles go here
It seems like the style.scss file is primarily used for importing purposes. I am content with the output, but I find it disconcerting that my CSS appears to be overshadowed by Bootstrap in the page source code.
For context, I am utilizing Compass alongside Sass.