title: Importing external stylesheets globally with CSS modules
body: <p>I'm struggling to add SASS with an external stylesheet (<a href="https://bulma.io/" rel="nofollow noreferrer">Bulma</a>) to my React application. So far I have set up <a href="https://parceljs.org/" rel="nofollow noreferrer">Parcel</a> with CSS modules via postcss. This is my <code>.postcssrc</code> config:</p>
  
  <pre><code>{
    "modules": true,
    "plugins": {
      "autoprefixer": {
        "grid": true
      },
      "postcss-modules": {
        "generateScopedName": "[name]_[local]_[hash:base64:5]"
      }
    }
  }
  </code></pre>
  
  <p>I have installed <code>node-sass</code> and successfully added a <code>.scss</code> file to one of my components. External (Bulma) styles are added via <code>@import "~bulma/bulma";</code> and are correctly resolved.</p>
  
  <p>Unfortunately, imported styles are not applied globally and instead the class names are modified similarly to local definitions, e.g.:</p>
  
  <pre class="lang-css prettyprint-override"><code>/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
  @-webkit-keyframes container_spinAround_28_Bz {
    from {
      transform: rotate(0deg); }
    to {
      transform: rotate(359deg); } }
  @keyframes container_spinAround_28_Bz {
    from {
      transform: rotate(0deg); }
    to {
      transform: rotate(359deg); } }
  </code></pre>
  
  <p>Note the added prefixes and suffixes.</p>
  
  <p>Ideally, I would like to import the stylesheet globally and do not modify their names. I'd like to continue using CSS modules and I think I also have to use SASS in order to globally modify Bulma stylesheet by overriding SASS variables.</p>
  
  <p>Anyway, things I've tried so far:</p>
  
  <ul>
  <li>Using <code>postcss-nested</code> and wrapping the import with <code>:global</code> block:</li>
  </ul>
  
  <pre class="lang-css prettyprint-override"><code>:global {
    @import "~bulma/bulma";
  }
  </code></pre>
  
  <p>However, this throws an exception:</p>
  
  <pre><code>main.scss:5018:5: Missing whitespace before :global
  </code></pre>
  
  <ul>
  <li>Creating a separate <code>scss</code> file included directly in HTML file via <code>&lt;link&gt;</code> rather than imported in a <code>jsx</code>/<code>tsx</code> file to avoid using CSS modules.</li>
  </ul>
  
  <p>This seems to break Parcel entirely, as it fails to link correct files in the compiled HTML files, i.e. <code>&lt;LONG-HASH&gt;.css</code> instead of generated <code>main.&lt;HASH&gt;.css</code>.</p>
  
  <ul>
  <li>Using <code>postcss-import</code>.</li>
  </ul>
  
  <p>Either my setup is incorrect or it has no effect on SASS files.</p>