create-react-app, SCSS, and Bulmaswatch

12 February 2019   1 comment   Web development, Javascript, ReactJS

https://jenil.github.io/bulmaswatch/

1. Create a create-react-app first:

create-react-app myapp

2. Enter it and install node-sass and bulmaswatch

cd myapp
yarn add bulma bulmaswatch node-sass

3. Edit the src/index.js to import index.scss instead:

-import "./index.css";
+import "./index.scss";

4. "Rename" the index.css file:

git rm src/index.css 
touch src/index.scss
git add src/index.scss

5. Now edit the src/index.scss to look like this:

@import "node_modules/bulmaswatch/darkly/bulmaswatch";

This assumes your favorite theme was the darkly one. You can obviously change that later.

6. Run the app:

BROWSER=none yarn start

7. Open the browser at http://localhost:3000

CRA start

That's it! However, the create-react-app default look doesn't expose any of the cool stuff that Bulma can style. So let's rewrite our src/App.js by copying the minimal starter HTML from the Bulma documentation. So make the src/App.js component look something like this:

class App extends Component {
  render() {
    return (
      <section className="section">
        <div className="container">
          <h1 className="title">Hello World</h1>
          <p className="subtitle">
            My first website with <strong>Bulma</strong>!
          </p>
        </div>
      </section>
    );
  }
}

Now it'll look like this:

Bulma starter template

Yes, it's not much but it's a great start. Over to you to take this to infinity and beyond!

Not So Secret Sauce

In the rushed instructions above the choice of theme was darkly. But what you need to do next is go to https://jenil.github.io/bulmaswatch/, click around and eventually pick the one you like. Suppose you like spacelab, then you just change that @import ... line to be:

@import "node_modules/bulmaswatch/spacelab/bulmaswatch";

Comments

Lara

Thanks So much, so clearly !!!

Your email will never ever be published

Related posts

Previous:
Optimize DOM selector lookups by pre-warming by selectors' parents 11 February 2019
Next:
Experimenting with Nginx worker_processes 14 February 2019
Related by Keyword:
A React vs. Preact case study for a widget 24 July 2019
Whatsdeployed rewritten in React 15 April 2019
Inline scripts in create-react-app 2.0 and CSP hashes 05 October 2018
Webpack Bundle Analyzer for create-react-app 14 May 2018
How to create-react-app with Docker 17 November 2017