title: How to use bootstrap scss media query and mixins to multiple components scss files in React JS files
body: <p>Bootstrap 5 SCSS file loading multiple times in ReactJS project due to importing <code>@import '~bootstrap/scss/bootstrap';</code> bootstrap in all components scss file.</p>
  <p>I have multiple components files with their own scss files like dashboard.tsx - dashboard.scss, header.tsx - header.scss , sidebar.tsx - sidebar.scss etc...</p>
  <p>I cannot use bootstrap media queries without importing <code>@import '~bootstrap/scss/bootstrap';</code> in each component's scss files. Due to this application loading bootstrap multiple times.<a href="https://i.stack.imgur.com/xMm1a.png" rel="nofollow noreferrer">screenshot of styles loaded</a></p>