Updated webpack SCSS extract to provide sourcemaps

diff --git a/package-lock.json b/package-lock.json
index 536a6791191e2b0662fb2a9f41cf4ce0b4a5b962..ddb40574e92b7ffc7db7d559d02d531163bfb076 100644 (file)
--- a/package-lock.json
+++ b/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",

diff --git a/package.json b/package.json
index d26ff334e4e7aa9ec3bdb040af83054b21e25794..eebda1fd6e7b1a912b4a12082c56db0b00b4e686 100644 (file)
--- a/package.json
+++ b/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",
-    "file-loader": "^1.1.11",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "livereload": "^0.7.0",
     "node-sass": "^4.7.2",
     "npm-run-all": "^4.1.2",

diff --git a/webpack.config.js b/webpack.config.js
index 5abde44231910f58ee02e406af892b5771fa6df3..c5ce4829fde1c99caf55ccd6025cbfb91c6971ae 100644 (file)
--- a/webpack.config.js
+++ b/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: [{
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].css',
-                        context: './src/css/',
-                        outputPath: './',
-                        publicPath: 'public/'
-                    }
-                }, {
-                    loader: 'extract-loader', options: {
-                        publicPath: '',
-                    }
-                }, {
-                    loader: "css-loader", options: {
-                        sourceMap: dev
-                    }
-                }, {
-                    loader: 'postcss-loader',
-                    options: {
-                        ident: 'postcss',
-                        sourceMap: dev,
-                        plugins: (loader) => [
-                            require('autoprefixer')(),
-                        ]
-                    }
-                }, {
-                    loader: "sass-loader", options: {
-                        sourceMap: dev
-                    }
-                }]
+                use: ExtractTextPlugin.extract({
+                    fallback: "style-loader",
+                    use: [{
+                        loader: "css-loader", options: {
+                            sourceMap: dev
+                        }
+                    }, {
+                        loader: 'postcss-loader',
+                        options: {
+                            ident: 'postcss',
+                            sourceMap: dev,
+                            plugins: (loader) => [
+                                require('autoprefixer')(),
+                            ]
+                        }
+                    }, {
+                        loader: "sass-loader", options: {
+                            sourceMap: dev
+                        }
+                    }]
+                })
             }
         ]
     },
-    plugins: []
+    plugins: [
+        new ExtractTextPlugin("[name].css"),
+    ]
 };
 
 if (dev) {