adding scss-compilation (broken)

Author: knoxfighter

package.json

@@ -35,15 +35,19 @@
     "bootstrap-fileinput": "^4.4.9",
     "classnames": "^2.2.6",
     "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
+    "file-loader": "^1.1.11",
     "jquery": "^3.3.1",
     "locks": "^0.2.2",
+    "mini-css-extract-plugin": "^0.4.1",
     "node-sass": "^4.9.3",
     "prop-types": "latest",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-native-listener": "^1.0.2",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
+    "sass-loader": "^7.1.0",
     "semver": "^5.5.0",
     "sweetalert2": "^7.26.11",
     "sweetalert2-react-content": "^1.0.1",

webpack.config.js

@@ -1,7 +1,11 @@
 const path = require('path');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
-    entry: './ui/index.js',
+    entry: {
+        // js: './ui/index.js',
+        sass: './ui/index.scss'
+    },
     output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'app')
@@ -20,10 +24,81 @@ module.exports = {
                 use: {
                     loader: 'babel-loader'
                 }
+            },
+            {
+                test: /\.scss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    "css-loader",
+                    "sass-loader"
+                ]
+            },
+            {
+                test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/,
+                loaders: [
+                    {
+                        loader: "file-loader",
+                        options: {
+                            name: path => {
+                                console.log("es ist ein BILD!");
+                                console.log(path);
+                                if(!/node_modules|bower_components/.test(path)) {
+                                    return "app/images/[name].[ext]?[hash]";
+                                }
+
+                                return (
+                                    "app/images/vendor/" +
+                                    path.replace(/\\/g, "/")
+                                        .replace(
+                                            /((.*(node_modules|bower_components))|images|image|img|assets)\//g,
+                                            ''
+                                        ) +
+                                    '?[hash]'
+                                );
+                            },
+                            publicPath: 'app/'
+                        }
+                    }
+                ]
+            },
+            {
+                test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
+                loaders: [
+                    {
+                        loader: "file-loader",
+                        options: {
+                            name: path => {
+                                console.log("testausgabe");
+                                console.log(path);
+                                if (!/node_modules|bower_components/.test(path)) {
+                                    return 'app/fonts/[name].[ext]?[hash]';
+                                }
+
+                                return (
+                                    'app/fonts' +
+                                    '/vendor/' +
+                                    path
+                                        .replace(/\\/g, '/')
+                                        .replace(
+                                            /((.*(node_modules|bower_components))|fonts|font|assets)\//g,
+                                            ''
+                                        ) +
+                                    '?[hash]'
+                                );
+                            },
+                            publicPath: 'app/'
+                        }
+                    }
+                ]
             }
         ]
     },
     performance: {
         hints: false
-    }
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: "bundle.css"
+        })
+    ]
 }