title: Import Bootstrap 3 CSS into Angular 2+ with SASS as CSS
body: <p>I need to override some things in Bootstrap (3.3.7) CSS, so I need to load Bootstrap before all my other styles in order to do that. I understand  the way to do that is to import it in my application's main <code>styles.sass</code> at the top of the document. But when I do this via:</p>
  
  <pre><code>@import ./bootstrap.css
  </code></pre>
  
  <p>I get:</p>
  
  <pre><code>ERROR in ./~/css-loader!./src/bootstrap.css
  Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Users/bradley/Work/dashboard/src'
   @ ./~/css-loader!./src/bootstrap.css 6:4445-4497 6:4520-4572
   @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
   @ ./src/styles.sass
   @ multi ./src/styles.sass
  
  ERROR in ./~/css-loader!./src/bootstrap.css
  Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff2' in '/Users/bradley/Work/dashboard/src'
   @ ./~/css-loader!./src/bootstrap.css 6:4622-4676
   @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
   @ ./src/styles.sass
   @ multi ./src/styles.sass
  
  ERROR in ./~/css-loader!./src/bootstrap.css
  Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff' in '/Users/bradley/Work/dashboard/src'
   @ ./~/css-loader!./src/bootstrap.css 6:4707-4760
   @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
   @ ./src/styles.sass
   @ multi ./src/styles.sass
  
  ERROR in ./~/css-loader!./src/bootstrap.css
  Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.ttf' in '/Users/bradley/Work/dashboard/src'
   @ ./~/css-loader!./src/bootstrap.css 6:4790-4842
   @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
   @ ./src/styles.sass
   @ multi ./src/styles.sass
  
  ERROR in ./~/css-loader!./src/bootstrap.css
  Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.svg' in '/Users/bradley/Work/dashboard/src'
   @ ./~/css-loader!./src/bootstrap.css 6:4876-4928
   @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
   @ ./src/styles.sass
   @ multi ./src/styles.sass
  </code></pre>
  
  <p>That didn't work because I didn't bring the fonts into the project.</p>
  
  <p>That made me think there must be a more proper way to install bootstrap.</p>
  
  <p>So then I found <a href="https://github.com/twbs/bootstrap-sass" rel="nofollow noreferrer">bootstrap-sass</a>, and imported it using <code>npm install bootstrap-sass --save</code>, and then imported it into <code>styles.sass</code> with:</p>
  
  <pre><code>@import ../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss
  </code></pre>
  
  <p>And I get:</p>
  
  <pre><code>ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
  Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.eot' in '/Users/bradley/Work/dashboard/src'
   @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4253-4315 6:4338-4400
   @ ./src/styles.sass
   @ multi ./src/styles.sass
  
  ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
  Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff2' in '/Users/bradley/Work/dashboard/src'
   @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4452-4516
   @ ./src/styles.sass
   @ multi ./src/styles.sass
  
  ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
  Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff' in '/Users/bradley/Work/dashboard/src'
   @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4549-4612
   @ ./src/styles.sass
   @ multi ./src/styles.sass
  
  ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
  Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.ttf' in '/Users/bradley/Work/dashboard/src'
   @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4644-4706
   @ ./src/styles.sass
   @ multi ./src/styles.sass
  
  ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
  Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.svg' in '/Users/bradley/Work/dashboard/src'
   @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4742-4804
   @ ./src/styles.sass
   @ multi ./src/styles.sass
  </code></pre>
  
  <p>Shouldn't there just be a clean way to do this?</p>