Bulma is a relatively new CSS framework based on Flexbox. It has a number of built-in SASS variables to make customization easy. To take advantage of these capabilities, start a new Angular project with SASS (i.e.
ng new myApp --style=scss), then install Bulma.
Add the main Bulma CSS file to
angular.json so it will be loaded when the app bootstraps. (Important note: Be sure to include the CSS file BEFORE
styles.scss–otherwise the CSS file will override any changes we make in
That’s it! Bulma uses a single stylesheet and can be added just like that. However, there’s a lot more you can do with it.
To easily expose Bulma’s tools, add
Now we can import Bulma’s SASS variables into
styles.scss (our global stylesheet) and edit them to our heart’s content. Import the variables you want at the top, and be sure to import the rest of the Bulma at the bottom of the file. Here, for example, I changed the default button color and background from
There we go! We have Bulma up and running on Angular 6 and the ability to customize and extend it via SASS.