Updated webpack SCSS extract to provide sourcemaps

package-lock.json

@@ -3654,6 +3654,29 @@
         "loader-utils": "1.1.0"
       }
     },
+    "extract-text-webpack-plugin": {
+      "version": "4.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz",
+      "integrity": "sha512-Hypkn9jUTnFr0DpekNam53X47tXn3ucY08BQumv7kdGgeVUBLq3DJHJTi6HNxv4jl9W+Skxjz9+RnK0sJyqqjA==",
+      "dev": true,
+      "requires": {
+        "async": "2.6.0",
+        "loader-utils": "1.1.0",
+        "schema-utils": "0.4.5",
+        "webpack-sources": "1.1.0"
+      },
+      "dependencies": {
+        "async": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz",
+          "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
+          "dev": true,
+          "requires": {
+            "lodash": "4.17.4"
+          }
+        }
+      }
+    },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",

package.json

@@ -11,12 +11,11 @@
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.40",
     "@babel/preset-env": "^7.0.0-beta.40",
+    "autoprefixer": "^8.1.0",
     "babel-loader": "^8.0.0-beta.0",
     "babel-polyfill": "^6.26.0",
-    "autoprefixer": "^8.1.0",
     "css-loader": "^0.28.10",
-    "extract-loader": "^1.0.2",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^1.1.11",
     "livereload": "^0.7.0",
     "node-sass": "^4.7.2",
     "npm-run-all": "^4.1.2",

webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const dev = process.env.NODE_ENV !== 'production';
 
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 const config = {
     target: 'web',
@@ -30,40 +31,33 @@ const config = {
             },
             {
                 test: /\.scss$/,
-                use: [{
+                use: ExtractTextPlugin.extract({
-                    loader: 'file-loader',
+                    fallback: "style-loader",
-                    options: {
+                    use: [{
-                        name: '[name].css',
+                        loader: "css-loader", options: {
-                        context: './src/css/',
+                            sourceMap: dev
-                        outputPath: './',
+                        }
-                        publicPath: 'public/'
+                    }, {
-                    }
+                        loader: 'postcss-loader',
-                }, {
+                        options: {
-                    loader: 'extract-loader', options: {
+                            ident: 'postcss',
-                        publicPath: '',
+                            sourceMap: dev,
-                    }
+                            plugins: (loader) => [
-                }, {
+                                require('autoprefixer')(),
-                    loader: "css-loader", options: {
+                            ]
-                        sourceMap: dev
+                        }
-                    }
+                    }, {
-                }, {
+                        loader: "sass-loader", options: {
-                    loader: 'postcss-loader',
+                            sourceMap: dev
-                    options: {
+                        }
-                        ident: 'postcss',
+                    }]
-                        sourceMap: dev,
+                })
-                        plugins: (loader) => [
-                            require('autoprefixer')(),
-                        ]
-                    }
-                }, {
-                    loader: "sass-loader", options: {
-                        sourceMap: dev
-                    }
-                }]
             }
         ]
     },
-    plugins: []
+    plugins: [
+        new ExtractTextPlugin("[name].css"),
+    ]
 };
 
 if (dev) {