Bulma

How to use Bulma Sass in react.js

In this article, you use the Bulma CSS framework and create a project use Bulma sass.

Bulma is a great CSS framework is my opinion. One thing I love in Bulma is the class names. Bulma class names are very easy and rememberable for everyone and beginner person.

When I start the Bulma, I face one very little problem. That is sass. So I try to figure out how to use Bulma sass and also extend it for my project?

In this article, we together create a Bulma project in react js use of Bulma sass. Use sass in Bulma very easily, and Bulma also provides well define documentation for the developer. You easily read it and follow it.

If are learn more about Bulma, then you read all my articles on Bulma.

use Bulma Sass in react.js

Let’s start it

1. Install
2. Import sass
3. Demo

Install

Firstly you install one npm package in that node-sass with Bulma. The node-sass package adds the sass functionally in your react project. You install the node-sass with the following command.

npm install node-sass
or 
yarn add node-sass

After installing the npm package successfully then follow my second step.

Import sass

Import sass step we divided with two-part

1. Basic Information about sass and Bulma
2. Main Code part

If you know about the basic information about the Bulma and sass, you skip it and follow the Main code part.

Basic Information about sass and Bulma

Sass official provides two file extensions for the developer to write CSS in the file.

1. sass
2. scss

Bulma always uses sass syntax to write sass files. If you import the Bulma sass file in the scss file extension, you face an error.

Compiler Error In the sass

Main Code part

Firstly, you import the Bulma sass file in your react.js project

@import '~bulma/bulma.sass';

import the Bulma sass in react.js

If you import the Bulma sass individually. You definitely do that.

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/grid/columns.sass"

If you import individually button style in Bulma.

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"

Demo

Bulma Sass project in react.js

Check out my article on the Bulma CSS framework

Install react-Bulma-components in my react app

Install Bulma into React.js

Conclusion

You change Bulma CSS according to your own thought. In that case, you use Bulma sass. You change in Bulma only sass variables. I recommended you don’t change big stuff in Bulma CSS. Otherwise, you face an error.