BZ#145849913 Allows for image assets to be dynamically skinned

client/app/core/shopping-cart/_shopping-cart.sass

@@ -0,0 +1,2 @@
+.cart-duplicate-icon
+  padding: 0 .5em

client/app/core/shopping-cart/shopping-cart.component.js

@@ -1,4 +1,4 @@
-import './_shopping-cart.scss';
+import './_shopping-cart.sass';
 import templateUrl from './shopping-cart.html';
 
 export const ShoppingCartComponent = {

client/app/layouts/_application.sass

@@ -1,5 +1,4 @@
 // Product overrides of Boostrap & Patternfly variables
-
 $modal-about-pf-bg-color: #083c5a
 // sets background color of 'About' modal
 
@@ -8,7 +7,7 @@ $modal-about-pf-bg-color: #083c5a
 
 .about-modal-pf
   background-color: $modal-about-pf-bg-color
-  background-image: url('../images/bg-modal-about-pf.png')
+  background-image: url('#{$img-base-path}images/bg-modal-about-pf.png')
 
 // @font-face
 //  font-family: 'FontAwesome'

client/app/layouts/_navigation.sass

@@ -1,6 +1,6 @@
 .navbar-pf-vertical
   background-color: $app-color-dark-blue-gray
-  background-image: url('../images/bg-navbar.png')
+  background-image: url('#{$img-base-path}images/bg-navbar.png')
   background-repeat: no-repeat
   background-size: auto 100%
 

client/app/states/login/_login.sass

@@ -1,20 +1,21 @@
+@import '_bem-support/index'
+
 +block(login-pf)
+  +element(img)
+    +modifier(top)
+      left: 0
+      top: 0
+    +modifier(bottom)
+      bottom: 0
+      position: fixed
+      right: 0
+
+
   background-color: $app-color-deep-blue
-  background-image: url('../images/bg-login-2.png')
-  background-position: 100% 100%
-  background-repeat: no-repeat
-  background-size: auto
   height: calc(100vh)
   margin-bottom: -38px
   margin-top: -60px
 
-  &::before
-    background: transparent
-    background-position: 0% 0%
-    background-repeat: no-repeat
-    background-size: auto
-    content: url('../images/bg-login.png')
-
   .container
     background-color: transparent
 

client/app/states/login/login.html

@@ -1,6 +1,8 @@
 <div class="login-pf">
+  <img class="login-pf__img--top" src="./images/bg-login.png" alt="top-corner" />
+  <img class="login-pf__img--bottom" src="./images/bg-login-2.png" alt=" bottom-corner" />
   <span id="badge">
-    <img class="logo" src="images/login-screen-logo.png" alt=" logo" />
+    <img class="logo" src="./images/login-screen-logo.png" alt=" logo" />
   </span>
   <div class="container">
     <div class="row">

client/assets/sass/_patternfly.sass

@@ -0,0 +1,9 @@
+// Bootstrap path variables
+$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'
+// Font Awesome path variables
+$fa-font-path: '~font-awesome/fonts'
+// Patternfly path variables
+$img-path: '~patternfly-sass/assets/images/patternfly/'
+$font-path: '~patternfly-sass/assets/fonts/patternfly/'
+
+@import '~patternfly-sass/assets/stylesheets/patternfly'

client/assets/sass/styles.sass

@@ -1,3 +1,6 @@
+// Global constants
+$img-base-path: '/' !default
+
 @import 'patternfly'
 
 // BEM Support : See _bem-support/_index.sass for more information

config/webpack.dev.js

@@ -14,6 +14,7 @@ const nodeModules = path.resolve(__dirname, '../node_modules');
 const protocol = process.env.PROXY_PROTOCOL || 'http://';
 const host = process.env.PROXY_HOST || process.env.MOCK_API_HOST || '[::1]:3000';
 const hasSkinImages = fs.existsSync(`${root}/skin/images`);
+const appBasePath = process.env.NODE_ENV === 'production' ? "'/ui/service/'" : "'/'";
 
 console.log("Backend proxied on " + protocol + host);
 
@@ -113,16 +114,27 @@ module.exports = {
 
       // css loaders: extract styles to a separate bundle
       {
-        test: /\.(css|s(a|c)ss)$/,
+        test: /\.(css)$/,
         use: ExtractTextWebpackPlugin.extract({
           fallback: 'style-loader',
           allChunks: true,
-          loader: [
-            'css-loader?importLoaders=2&sourceMap=true',
+          use: [
+            'css-loader?importLoaders=1&sourceMap=true',
             'postcss-loader',
+          ],
+        }),
+      },
+      {
+        test: /\.(sass|scss)$/,
+        use: ExtractTextWebpackPlugin.extract({
+          fallback: 'style-loader',
+          allChunks: true,
+          use: [
+            'css-loader?importLoaders=1&sourceMap=true',
             {
               loader: 'sass-loader',
               options: {
+                data: `$img-base-path: ${appBasePath}`,
                 sourceMap: true,
                 includePaths: [
                   `${root}/assets/sass`,