title: with webpack, why should one import CSS files from JS source code and not build CSS in isolation like the tradition did?
body: <p>webpack doc for loading css:
  <a href="https://webpack.js.org/guides/asset-management/#loading-css1" rel="nofollow noreferrer">https://webpack.js.org/guides/asset-management/#loading-css1</a></p>
  <p>The webpack doc asks to import the CSS files from the Javascript code and to then run extract-text-webpack-plugin to extract the CSS.</p>
  <p>--&gt; with webpack, why should one import CSS files from JS source code and not build CSS in isolation like the tradition did?</p>
  <p>By not importing CSS from Javascript, I mean that the webpack config for CSS has no &quot;.js&quot; extension, and it parses the CSS/SCSS files directly.</p>
  <p>There are benefits of not importing CSS from javascript:</p>
  <ol>
  <li><p>(objective fact). If one wants to build only CSS, it will be faster if the bundler does not need to parse the Javascript source code. Besides, one can run the bundlers for CSS and Javscript in parallel by using parallel-webpack.</p>
  </li>
  <li><p>(subjective, based on tradition, but most important in my opinion). SASS building in isolation has been the tradition for years. Therefore, we can achieve better HTML semantics and maintainability. Importing CSS from JS is virtual and may lead to neglect the generated separate CSS bundle.</p>
  </li>
  <li><p>(objective fact) One can split more the config files for CSS and Javascript, for more clarity.</p>
  </li>
  </ol>