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 which I love that is name conversion is very easy and rememberable for everyone.

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 my all 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 just install the node-sass with the following command.

npm install node-sassor 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 just 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 uses always 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
Compiler Error In the sass
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

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

Javascript || Python || AI || Biotechnology || Bioinformatic || Front-end Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store