Just to recap what I did to make it work with a plain Create React App (no ejection required).
Either, work with CSS, simply import the Bulma file in index.js:
import 'bulma/css/bulma.css'
Or, work with Sassy CSS:
As described in the docs here, install the recommended CSS preprocessor:
npm install --save node-sass-chokidar
Then in package.json, add the following lines:
"scripts": {
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",Then, in the src directory, create a mystyles.scss file and within this file add the following lines - this is also the file where you may want to add your own customisations according to the official Bulma instructions:
// Import the initial variables (only needed if you want to customise this file):
@import "bulma/sass/utilities/initial-variables";
@import "bulma/sass/utilities/functions";
// Your customisations go here...
// Import the rest of Bulma:
@import "bulma/bulma.sass";Import the mystyles.css file (generated with the next step) in index.js:
// Bulma:
import './mystyles.css'
Finally, build (or watch) the Sass files:
npm run build-css