title: Setup for React styled components
body: <p>I can't get styled components working; must be something in my setup. Here's the component:</p>
  
  <pre><code>import React from 'react';
  import styled from 'styled-components';
  
  const Wrapper = styled.div`
    display: flex;
    justify-content: center;
    margin-top: 100px;
  `;
  
  const TestComponent = () =&gt; (
    &lt;Wrapper&gt;
      TEST
    &lt;/Wrapper&gt;
  );
  
  export default TestComponent;
  </code></pre>
  
  <p>When rendered it's just a <code>&lt;div&gt;</code> with a funky <code>class</code> but no styles.</p>
  
  <p>My <code>package.json</code>:</p>
  
  <pre><code>{
    "name": "Lolland",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "webpack-dev-server --open --mode development",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "@babel/runtime": "^7.0.0",
      "axios": "^0.18.0",
      "babel-plugin-styled-components": "^1.6.0",
      "babel-runtime": "^6.26.0",
      "history": "^4.7.2",
      "mobx": "^5.1.0",
      "mobx-react": "^5.2.5",
      "mobx-react-router": "^4.0.4",
      "mobx-rest": "^2.2.5",
      "mobx-rest-axios-adapter": "^2.1.1",
      "prop-types": "^15.6.2",
      "query-string": "^6.1.0",
      "react": "^16.4.2",
      "react-dom": "^16.4.2",
      "react-router": "^4.3.1",
      "react-spinners": "^0.4.5",
      "recompose": "^0.30.0",
      "styled-components": "^3.4.5"
    },
    "devDependencies": {
      "@babel/core": "^7.0.0",
      "@babel/plugin-transform-runtime": "^7.0.0",
      "@babel/preset-env": "^7.0.0",
      "@babel/preset-react": "^7.0.0",
      "babel-loader": "^8.0.0",
      "babel-plugin-styled-components": "^1.6.0",
      "eslint": "^5.4.0",
      "eslint-config-airbnb": "^17.1.0",
      "eslint-plugin-import": "^2.14.0",
      "eslint-plugin-jsx-a11y": "^6.1.1",
      "eslint-plugin-react": "^7.11.1",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "webpack": "^4.17.1",
      "webpack-cli": "^3.1.0",
      "webpack-dev-server": "^3.1.7"
    }
  }
  </code></pre>
  
  <p>My <code>.babelrc</code>:</p>
  
  <pre><code>{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-transform-runtime", "emotion", "babel-plugin-styled-components"]
  }
  </code></pre>
  
  <p>And my <code>webpack.config.js</code>:</p>
  
  <pre><code>const HtmlWebPackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
            },
          ],
        },
      ],
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: './src/index.html',
        filename: './index.html',
      }),
    ],
  };
  </code></pre>