añadido el soporte para imagenes y svg

Makefile

@@ -1,8 +1,6 @@
 all:
 	npm install
 	npm install --save-dev expose-loader
-	npm install --save-dev sass-loader
-	npm install --save-dev postcss-loader
 	npm run build
 	mkdir -p dist/js
 	cp assets/zxcvbn.js dist/js

assets/_lowry.scss

@@ -1,17 +1,5 @@
-$theme-colors: (
-  "primary":       $blue !default;
-  "secondary":     $gray-600 !default;
-  "success":       $green !default;
-  "info":          $cyan !default;
-  "warning":       $yellow !default;
-  "danger":        $red !default;
-  "light":         $gray-100 !default;
-  "dark":          $gray-800 !default;
-);
-
-
-/*css*/
-
+$body-bg: rgb(250,250,250);
+$body-color: rgb(90,90,90);
 body {
   background-image:url('../img/background/lowry01.jpg');
   background-color:transparent;
@@ -22,7 +10,7 @@ body {
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
-}
+}\
 .container {
   padding-top:10%;
 }
@@ -30,13 +18,13 @@ body {
   padding: 1rem;
   border-radius: 0.6rem;
 }
-.logosd em{
+.logosd em{ 
   display:none;
 }
 .logosd::before{
   content:'';
   display:block;
-  background:url('sd_nb.svg') no-repeat center center;
+  background:url('../img/sd_nb.svg') no-repeat center center;
   padding:0 30%;
   min-height:5rem;
   opacity:0.5;
@@ -65,3 +53,4 @@ body {
 .login {
   background: rgba(70,130,150,0.6)
 };
+

assets/index.js

@@ -1,4 +1,5 @@
 import "bootstrap";
+import "./style.scss";
 import $ from "jquery"
 window.jQuery = $;
 window.$ = $;

package.json

@@ -18,10 +18,13 @@
     "popper.js": "^1.12.3"
   },
   "devDependencies": {
+    "@svgr/core": "^4.1.0",
     "autoprefixer": "^7.1.3",
     "css-loader": "^0.28.7",
     "expose-loader": "^0.7.5",
     "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^3.0.1",
+    "node-sass": "^4.5.3",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.18.2",

webpack.config.js

@@ -12,39 +12,45 @@ module.exports = {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
   },
-
   module: {
-    //https://getbootstrap.com/docs/4.0/getting-started/webpack/
-    loaders: [
-      {
-        test: /\.(scss)$/,
-        use: [{
-          loader: 'style-loader', // inject CSS to page
-        }, {
-          loader: 'css-loader', // translates CSS into CommonJS modules
-        }, {
-          loader: 'postcss-loader', // Run post css actions
-          options: {
-            plugins: function () { // post css plugins, can be exported to postcss.config.js
-              return [
-                require('precss'),
-                require('autoprefixer')
-              ];
-            }
-          }
-        }, {
-          loader: 'sass-loader' // compiles Sass to CSS
-        }]
-      }
-    ],
     rules: [
+      // https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less
+      {
+        test: /\.scss$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: ['css-loader', 'sass-loader']
+        })
+      },
+      //https://webpack.js.org/loaders/file-loader/
+      {
+        test: /\.(png|jpg|gif)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              outpath: 'img',
+            },
+          },
+        ],
+      },
+      //https://webpack.js.org/loaders/svg-inline-loader/
       //      {
-      //        test: /\.css$/,
-      //        use: ExtractTextPlugin.extract({
-      //          fallback: 'style-loader',
-      //          use: 'css-loader'
-      //        })
-      //      },
+      //       test: /\.svg$/,
+      //     loader: 'svg-inline-loader'
+      // },
+      //https://github.com/smooth-code/svgr/tree/master/packages/webpack
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        issuer: {
+          test: /\.jsx?$/
+        },
+        use: ['babel-loader', '@svgr/webpack', 'file-loader']
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file-loader'
+      },
       {
         test: require.resolve('jquery'),
         use: [{
@@ -66,7 +72,35 @@ module.exports = {
       'window.jQuery': 'jquery',
       Popper: ['popper.js', 'default']
     }),
-    new ExtractTextPlugin("style.css")
+    new ExtractTextPlugin('style.css')
   ]
 };
 
+
+
+//
+//
+//
+//https://getbootstrap.com/docs/4.0/getting-started/webpack/
+//    loaders: [
+//      {
+//        test: /\.scss$/,
+//        use: [{
+//          loader: 'style-loader', // inject CSS to page
+//        }, {
+//          loader: 'css-loader', // translates CSS into CommonJS modules
+//        }, {
+//          loader: 'postcss-loader', // Run post css actions
+//          options: {
+//            plugins: function () { // post css plugins, can be exported to postcss.config.js
+//              return [
+//                require('precss'),
+//                require('autoprefixer')
+//              ];
+//            }
+//          }
+//        }, {
+//          loader: 'sass-loader' // compiles Sass to CSS
+//        }]
+//      }
+//    ],