title: Babel import css syntax error
body: <p>I want to be able to use <code>import</code> in my react application for not only js/jsx files but also for css files. From what I've read, the best way to do that is to use the <a href="https://www.npmjs.com/package/extract-text-webpack-plugin" rel="nofollow noreferrer"><code>extract-text-webpack-plugin</code></a> which will take your imported css files and bundle them together.</p>
  
  <p>I've set it up so that its generating my bundled css file, but for some reason every time I load my page I get a syntax error: </p>
  
  <pre><code>SyntaxError: MyWebpage/views/global.css: Unexpected token, expected ; (1:5)
  &gt; 1 | body {
      |      ^
    2 |     margin: 0;
    3 | }
  </code></pre>
  
  <p>My setup looks like this:</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const path = require('path');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  
  const config = {
    entry: ['babel-polyfill', './views/Index.jsx'],
    output: {
      path: path.resolve(__dirname, 'public'),
      filename: 'bundle.js',
      publicPath: '/public'
    },
    module: {
      rules: [
        { test: /\.(jsx|js)$/, exclude: /node_modules/ , use: 'babel-loader' },
        { 
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin("styles.css"),
    ]
  };
  
  module.exports = config;
  </code></pre>
  
  <p>The entry point <code>./views/Index.js</code> is where I'm importing my css file:</p>
  
  <p><strong>Index.js</strong></p>
  
  <pre><code>import React from 'react';
  import Layout from './Layout.jsx';
  import PageContent from './PageContent.jsx';
  import './global.css';
  
  class Index extends React.Component {
    render() {
      return (
          &lt;Layout title={this.props.title}&gt;
              &lt;PageContent /&gt;
          &lt;/Layout&gt;
      );
    }
  }
  
  export default Index;
  </code></pre>
  
  <p>Inside the imported <code>./Layout.jsx</code> file I'm using a <code>&lt;link&gt;</code> to include the bundled css file in my page:</p>
  
  <p><strong>Layout.jsx</strong></p>
  
  <pre><code>import React from 'react';
  
  class Layout extends React.Component {
      render() {
          return (
              &lt;html&gt;
              &lt;head&gt;
                  &lt;title&gt;{this.props.title}&lt;/title&gt;
                  &lt;link rel="stylesheet" href="styles.css" /&gt;
              &lt;/head&gt;
              &lt;body&gt; 
                  &lt;div id="root"&gt;
                      {this.props.children}
                  &lt;/div&gt;
                  &lt;script type="text/javascript" src="./bundle.js"&gt;&lt;/script&gt;
              &lt;/body&gt;
              &lt;/html&gt;
          );
      }
  }
  
  export default Layout;
  </code></pre>
  
  <p>I'm pretty confused because it seems like my app is building fine, but when I try to access my webpage I keep getting a syntax error.</p>
  
  <p>Can anyone please help me understand what I'm doing wrong?</p>