From 9212ec83cd1fa112c7fd3f17ba20940bb324064d Mon Sep 17 00:00:00 2001
From: Carl Kittelberger <icedream@icedream.pw>
Date: Fri, 24 Aug 2018 11:00:50 +0200
Subject: [PATCH] Build CSS into separate files.

---
 package.json            | 1 +
 webpack.config.babel.js | 6 ++++--
 yarn.lock               | 8 ++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 7c503d8..5ec1f0e 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "eslint-plugin-import": "^2.14.0",
     "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.2",
     "mkdirp": "^0.5.1",
     "npm-run-all": "^4.1.3",
     "resolve-url-loader": "^2.3.0",
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 3e39d6f..a1abb48 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -1,6 +1,7 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CspHtmlWebpackPlugin from 'csp-html-webpack-plugin';
 import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 import path from 'path';
 
@@ -18,6 +19,7 @@ export default (env, { mode }) => {
     },
 
     plugins: [
+      new MiniCssExtractPlugin(),
       new HtmlWebpackPlugin({
         template: './src/index.html',
         inject: 'head',
@@ -66,7 +68,7 @@ export default (env, { mode }) => {
         {
           test: /\.css$/i,
           use: [
-            'style-loader',
+            MiniCssExtractPlugin.loader,
             {
               loader: 'css-loader',
               options: {
@@ -81,7 +83,7 @@ export default (env, { mode }) => {
         {
           test: /\.styl$/i,
           use: [
-            'style-loader',
+            MiniCssExtractPlugin.loader,
             {
               loader: 'css-loader',
               options: {
diff --git a/yarn.lock b/yarn.lock
index bbe842f..38c1639 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3453,6 +3453,14 @@ mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
 
+mini-css-extract-plugin@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.2.tgz#b3ecc0d6b1bbe5ff14add42b946a7b200cf78651"
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"