Bulma + Angular 6

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.

npm install --save 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 styles.scss.)

...
"styles": [
	"node_modules/bulma/css/bulma.css",
	"src/styles.scss"
],
...
angular.json

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 stylePreprocessorOptions to angular.json.

...
"styles": [
	"src/styles.scss",
	"node_modules/bulma/css/bulma.css"
],
"stylePreprocessorOptions": {
	"includePaths": [
		"node_modules",
		"node_modules/bulma/sass/utilities"
	]
},
...
angular.json

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 $grey-darker and $white to $white and $blue, respectively.

@import "initial-variables";
@import "functions";
...
$button-color: $white !default
$button-background-color: $blue !default
...

@import "bulma";
styles.scss

Before:

angular bulma button before

After:

angular bulma button after

There we go! We have Bulma up and running on Angular 6 and the ability to customize and extend it via SASS.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.