title: Unable to override bootstrap styles
body: <p>I have tried following the instructions listed on Bootstrap's website, as well as various StackOverflow questions, and am still unable to override a single style element of Bootstrap. I'd appreciate help, I'm not particularly knowledgeable of web dev.</p>
  <p>Here is my setup.</p>
  <p>I used create-react-app to generate a file structure. I have an index.js where I immediately <code>import './index.scss';</code></p>
  <p>Here is my index.scss</p>
  <pre><code>@import &quot;../node_modules/bootstrap/scss/functions&quot;;
  @import &quot;../node_modules/bootstrap/scss/variables&quot;;
  @import &quot;../node_modules/bootstrap/scss/mixins&quot;;
  
  body {
    margin: 0;
    font-family: Catamaran, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  
  code {
    font-family: Catamaran source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; }
  
  /* playfair-display-regular - latin */
  @font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    src: url(&quot;./fonts/playfair-display-v25-latin-regular.eot&quot;);
    /* IE9 Compat Modes */
    src: local(&quot;&quot;), url(&quot;./fonts/playfair-display-v25-latin-regular.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;), url(&quot;./fonts/playfair-display-v25-latin-regular.woff2&quot;) format(&quot;woff2&quot;), url(&quot;./fonts/playfair-display-v25-latin-regular.woff&quot;) format(&quot;woff&quot;), url(&quot;./fonts/playfair-display-v25-latin-regular.ttf&quot;) format(&quot;truetype&quot;), url(&quot;./fonts/playfair-display-v25-latin-regular.svg#PlayfairDisplay&quot;) format(&quot;svg&quot;);
    /* Legacy iOS */ }
  
  /* catamaran-regular - latin */
  @font-face {
    font-family: 'Catamaran';
    font-style: normal;
    font-weight: 400;
    src: url(&quot;./fonts/catamaran-v8-latin-regular.eot&quot;);
    /* IE9 Compat Modes */
    src: local(&quot;&quot;), url(&quot;./fonts/catamaran-v8-latin-regular.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;), url(&quot;./fonts/catamaran-v8-latin-regular.woff2&quot;) format(&quot;woff2&quot;), url(&quot;./fonts/catamaran-v8-latin-regular.woff&quot;) format(&quot;woff&quot;), url(&quot;./fonts/catamaran-v8-latin-regular.ttf&quot;) format(&quot;truetype&quot;), url(&quot;./fonts/catamaran-v8-latin-regular.svg#Catamaran&quot;) format(&quot;svg&quot;);
    /* Legacy iOS */ }
  
  $container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1020px,
    xxl: 1080px
  );
  
  $blue:   #306779;
  $primary: #306779;
  
  @import &quot;../node_modules/bootstrap/scss/bootstrap.scss&quot;;
  </code></pre>
  <p>The fonts are loading correctly, but the bootstrap variables are not. I have also attempted to manually transpile a scss file into a css file and import that into the <code>&lt;head&gt;</code> using <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../scss/custom.css&quot; /&gt;</code>, however that also does not work and I still see the normal bootstrap color scheme.</p>