title: Unable to skip 3rd party library CSS from CSS-Module transformation
body: <p>I am trying CSS Modules for the first time with React and Webpack and I came across at least three ways to achieve it:</p>
  
  <ol>
  <li>css-loader</li>
  <li><a href="https://github.com/gajus/react-css-modules" rel="nofollow noreferrer">react-css-modules</a></li>
  <li><a href="https://github.com/gajus/babel-plugin-react-css-modules" rel="nofollow noreferrer">babel-plugin-react-css-modules</a></li>
  </ol>
  
  <p>I went with <code>babel-plugin-react-css-modules</code> in order to balance code simplicity and performance and everything seems to be working fine except for one thing: my 3rd party libraries (Bootstrap and Font Awesome) are also included in CSS Modules transformation.</p>
  
  <pre><code>&lt;NavLink to="/about" styleName="navigation-button"&gt;&lt;/NavLink&gt;
  </code></pre>
  
  <p>The above assigns a properly transformed <code>className</code> to the <code>NavLink</code>. However, a <code>span</code> inside needs to refer to global styles in order to render an icon.</p>
  
  <pre><code>&lt;span className="fa fa-info" /&gt;
  </code></pre>
  
  <p>The above span is not assigned a transformed <code>className</code> which is expected, but my bundled stylesheet does not have these CSS classes as they are being transformed into something else, to simulate local scope.</p>
  
  <p>Below is the content in my <code>.babelrc</code> file to activate <code>babel-plugin-react-css-modules</code>:</p>
  
  <pre><code>{
    "presets": ["env", "react"],
    "plugins": [
      ["react-css-modules", {
        "generateScopedName": "[name]__[local]___[hash:base64:5]",
        "filetypes": {
          ".less": {
            "syntax": "postcss-less"
          }
        }
      }]
    ]
  }
  </code></pre>
  
  <p>In my Webpack configuration, below is the section to configure <code>css-loader</code> for transforms:</p>
  
  <pre><code>{
      test: /\.(less|css)$/,
      exclude: /node_modules/,
      use: extractCSS.extract({
          fallback: 'style-loader',
          use: [
              {
                  loader: 'css-loader',
                  options: {
                      minimize: true,
                      modules: true,
                      sourceMap: true,
                      localIdentName: '[name]__[local]___[hash:base64:5]'
                  }
              },
              {
                  loader: 'less-loader'
              }
          ]
      })
  }
  </code></pre>
  
  <p>As far as I have read, the above rule should exclude the library stylesheets and I also tried adding another rule specifically for the excluded stylesheets, however that did not seem to work, as I guess as those stylesheets were still transformed with the original rule.</p>
  
  <p>In order to import CSS from the two libraries, I have the below two lines in my parent stylesheet that declares some global styles:</p>
  
  <pre><code>@import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
  @import '../../../node_modules/font-awesome/css/font-awesome.min.css';
  </code></pre>