title: Webpack import node_module in css as global
body: <p>I used to import directly in javascript like<br>
  <code>import '!style-loader!css-loader!../../node_modules/react-soundplayer/styles/buttons.css'</code> but its too ugly and I dont like it</p>
  
  <p>In my react component, I want to specify a css-module
  <code>import style from './style/App.css'</code>, and in <code>App.css</code>, I have</p>
  
  <pre><code>:global (@import '~react-soundplayer/styles/buttons.css');
  </code></pre>
  
  <p>The :global is not working, it just prints ":global (@import '~basscss/css/basscss.css');" in a style element in HTML head after webpack.</p>
  
  <p>I need a way to import node_modules stuff in my .css as <strong>global css and preserve the original class name</strong> (without applying css-loader <code>localIdentName: '[path][name]__[local]'</code>)</p>
  
  <p>My webpack.config is</p>
  
  <pre><code>const path = require('path');
  
  const package = require('./package.json');
  
  const PATHS = {
      src: path.join(__dirname, './src'),
      public: path.join(__dirname, './public')
  };
  
  var config = {
      entry: { 
          app: [ 'babel-polyfill', path.resolve(PATHS.src, 'index.js') ] 
      },
      output: {
          path: path.resolve(PATHS.public),
          filename: 'bundle.js',
          publicPath: '/'
      },
      devServer: {
          contentBase: path.resolve(PATHS.public),
          port: 3000,
          historyApiFallback: true,
          proxy: {
              '/api/**': {
              target: 'http://localhost:5000',
              changeOrigin: true
              }
          }
      },
      module: {
          rules: [
          {
              test: /\.js$/,
              use: [
                  { 
                      loader: 'babel-loader'
                  }
              ],
              exclude: /(node_modules|bower_components)/
          },
          {
              test: /\.css$/,
              use: [
                  {
                      loader: 'style-loader',
                      options: { singleton: true }
                  },
                  {
                      loader: 'css-loader',
                      options: { 
                          modules: true,
                          camelCase: 'dashes',
                          localIdentName: '[path][name]__[local]' 
                      }
                  }
              ]
          }
          ]
      }
  };
  module.exports = config;
  </code></pre>