title: Why are css selectors duplicated? (SCSS)
body: <p>I have one .scss file that is connected 4 times in other .scss files, why is the contents of this file 4 times included in the bundle.css? How to solve this problem?</p>
  
  <p><b>file_1.scss:</b></p>
  
  <pre><code>.header_video_titles {
      margin-top: 10%;
  }
  </code></pre>
  
  <p><b>file_2.scss, file_3.scss, file_4.scss:</b></p>
  
  <pre><code>@import "file_1.scss"
  </code></pre>
  
  <p>As a result, the bundle.css contains:</p>
  
  <pre><code>.header_video_titles {
      margin-top: 10%;
  }
  .header_video_titles {
      margin-top: 10%;
  }
  .header_video_titles {
      margin-top: 10%;
  }
  .header_video_titles {
      margin-top: 10%;
  }
  </code></pre>