Search code examples
reactjssassbootstrap-5react-typescript

React Typescript App With Bootstrap And Sass Loses Styles When Using Partial Bootstrap Import Pattern

I created a simple app with npx create-react-app@latest --template typescript and followed instructions at https://create-react-app.dev/docs/adding-bootstrap/ to add bootstrap with sass - i.e.:

  1. I ran npm i bootstrap sass
  2. Created src/custom.css
  3. Replaced import './index.css' with import './custom.scss' in index.tsx
  4. Added @import '~bootstrap/scss/bootstrap.scss'; to ./custom.scss

I added a simple bootstrap button to my App.tsx file and npm start opened the app in my browser and it looked perfect.

enter image description here

So then I decided to modify my custom.scss file to import bootstrap following the "Option B: Include parts of Bootstrap" approach described in https://getbootstrap.com/docs/5.3/customize/sass/.

But when I re-ran the app using npm start the bootstrap button lost all its formatting and colour.

enter image description here

Having searched stackoverflow and other places, I haven't found a fix or workaround for this problem. The only thing of note I discovered was that create-react-app isn't supported anymore, so it may simply be that I chose the wrong tooling...

src/index.tsx:

import './custom.scss';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src/App.tsx:

import React from 'react';

function App() {
  return (
    <div className="App">
      <header>
        <h1>Sass Partial Importing Demo</h1>
      </header>
      <button type="button" className="btn btn-primary">Primary</button>
    </div>
  );
}

export default App;

src/custom.scss:

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

package.json:

{
  "name": "react-bootstrap5-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.48",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "bootstrap": "^5.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "sass": "^1.66.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Solution

  • Add Button component's SCSS since you are using "Partial Import"

    add this to bottom of your custom.scss:

    @import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/button-group";

    Since you're using Partial import, you should import the css that make your button styled, and you missed that.

    check on bootstrap's repo and you can see the scss which defines each components: https://github.com/twbs/bootstrap/tree/main/scss