title: Why are additional style files pulled in?
body: <p>I am troubleshooting a small Html file which has just one style sheet referenced. This is <a href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="nofollow noreferrer">https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css</a>.</p>
  
  <p>Chrome Developer Tools <code>Network</code> tab shows that this is the only css file that is downloaded.</p>
  
  <p>However, when inspecting an element in Chrome Developer Tools, there are no styles in boostrap.min.css. Instead, there are references to styles that are in files such as <code>_navbar.scss</code>. They are shown with line numbers, and if I click such a link, it opens up <a href="https://maxcdn.bootstrapcdn.com/bootstrap/_navbar.scss" rel="nofollow noreferrer">https://maxcdn.bootstrapcdn.com/bootstrap/_navbar.scss</a> in the <code>Sources</code> tab.</p>
  
  <p>I am now confused. How does this <code>_navbar.scss</code> file get involved? Why are there no styles found in bootstrap.min.css?</p>
  
  <p>This is what it looks like when inspecting elements:</p>
  
  <p><a href="https://i.stack.imgur.com/KrVD0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KrVD0.png" alt="enter image description here"></a></p>
  
  <p>Am I using Chrome Developer Tools wrongly?</p>