title: using bootstrap with vue webapp : How to customise
body: <p>I am using <a href="http://v4-alpha.getbootstrap.com/" rel="nofollow noreferrer">bootstrap-4</a> in my Vue webapp, But I am not able to customise this as is explained <a href="http://v4-alpha.getbootstrap.com/getting-started/options/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>I have my <strong>index.html</strong> which uses <a href="http://v4-alpha.getbootstrap.com/getting-started/download/#bootstrap-cdn" rel="nofollow noreferrer">Bootstrap CDN</a>, like following:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
  
      &lt;title&gt;Sample&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"&gt;
  
      &lt;link rel="stylesheet" href="/static/custom.scss" type="text/x-scss"&gt;  ==&gt; where I am overwriting variable
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"&gt;
  
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
  
      &lt;script src="/dist/client-vendor-bundle.js"&gt;&lt;/script&gt;
      &lt;script src="/dist/client-bundle.js"&gt;&lt;/script&gt; --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also tried changing the order of <code>custom.scss</code> and <code>bootstrap.css</code> in <strong>index.html</strong> as well.</p>
  
  <p>Following is <strong>custom.scss</strong>, where I am overwriting variables:</p>
  
  <pre><code>$body-bg:    #f5f5f5;
  $body-color: #f5f5f5;
  $enable-flex: true;
  </code></pre>
  
  <p>But this is not working.</p>
  
  <p>I also tried importing this in my app component, like following:</p>
  
  <pre><code>&lt;style lang="scss"&gt;
    @import 'custom.scss';
  
    // Following also did not work
    $body-bg: #333;
    $body-color: #999;  
  &lt;/style&gt;
  </code></pre>
  
  <p>How do I overwrite these variable to customise my webapp.</p>