title: Webpack config for internally load CSS
body: <p>I have a third party library call 'react-big-scheduler' and I have imported in to my component like this</p>
  
  <pre><code>import React from 'react';
  import Scheduler, {SchedulerData, ViewTypes, DATE_FORMAT} from 'react-big-scheduler'
  
  import moment from 'moment'
  
  class MyScheduler extends React.Component {
  
     render() {
       // render scheduler
     }
  
  }
  
  export default MyScheduler;
  </code></pre>
  
  <p>The problem is when I going to compile this component using webpack I'am getting an error from webpack saying <strong>Module parse failed: Unexpected character '#'</strong> as the component 'SchedulerData' requiring some CSS files from node_modules</p>
  
  <p>Error:</p>
  
  <pre><code>ERROR in ./node_modules/react-big-scheduler/lib/css/antd-globals-hiding-hack.css 1:0
  Module parse failed: Unexpected character '#' (1:0)
  You may need an appropriate loader to handle this file type.
  &gt; #RBS-Scheduler-root {
  |   /* stylelint-disable at-rule-no-unknown */
  |   /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
   @ ./node_modules/react-big-scheduler/lib/index.js 699:0-45
   @ ./src/components/scheduler/MyScheduler.js
   @ ./src/components/DataSet.js
   @ ./src/components/App.js
   @ ./src/index.js
   @ multi (webpack)-dev-server/client?http://localhost (webpack)/hot/dev-server.js ./src/index.js
  </code></pre>
  
  <p>How can I config webpack for internally load CSS files like this,
  Here is my webpack configuration for <code>dev</code> environment</p>
  
  <p>// configuration data related to development only</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const merge = require('webpack-merge');
  
  const paths = require('./paths');
  // import common webpack config
  const common = require('./webpack-common-config.js');
  
  module.exports = merge(common, {
    entry: [paths.appIndexJs],
    mode: 'development',
    // devtool option controls if and how source maps are generated.
    // see https://webpack.js.org/configuration/devtool/
    // If you find that you need more control of source map generation,
    // see https://webpack.js.org/plugins/source-map-dev-tool-plugin/
    devtool: 'eval',
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
        },
      }),
    ],
    module: {
      rules: [
        {
          // look for .js or .jsx files
          test: /\.(js|jsx)$/,
          // in the `src` directory
          include: path.resolve(paths.appSrc),
          exclude: /(node_modules)/,
          use: {
            // use babel for transpiling JavaScript files
            loader: 'babel-loader',
            options: {
              presets: ['@babel/react'],
            },
          },
        },
        {
          // look for .css or .scss files
          test: /\.(css|scss)$/,
          // in the `src` directory
          include: [path.resolve(paths.appSrc)],
          exclude: /(node_modules)/,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
              options: {
                discardDuplicates: true,
                importLoaders: 1,
                // This enables local scoped CSS based in CSS Modules spec
                modules: true,
                // generates a unique name for each class (e.g. app__app___2x3cr)
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        },
      ],
    },
  });
  </code></pre>
  
  <p>Did I miss something? need your help</p>