Adding External / Global Styles e.g. Bootstrap

Hi, Stackblitz is awesome! I’m excited to start trying it out and look forward to seeing it progress.

I have a question regarding adding styles. I normally use Sass in my Angular projects, and often pull in Bootstrap and other libraries via an @import in my style.scss file (in the top level of the src dir). This way I can also import modular styles.

// style.scss
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";
@import url('~https://fonts.googleapis.com/icon?family=Roboto');
@import "./sass/_variables.scss";
@import "./sass/_buttons.scss";
@import "./sass/_forms.scss";

I define the global stylesheet in the angular-cli.json e.g.:

// angular-cli.json
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],

Since we don’t have access to Angular CLI on Stackblitz, what is the best way to add in a library e.g. Bootstrap and apply the styles globally?

[EricSimons]

Hey @jacobedawson! Thanks for the kind words 😃

Best way to do this is use the “external resources” in the dependency sidebar & link to the bootstrap css files on unpkg (https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css)

We’re looking into adding static CSS/SASS file support though, would love to hear thoughts on how you’d like to see that implemented!

[EricSimons]

@maxime1992 @jacobedawson thanks for the kind words guys! ❤️ Btw, we just shipped SASS (w/ imports from NPM) and angular-cli.json config options! You can check it out in action in the Angular starter template or my Angular Material starter template — would love hear your thoughts 😃