refactor(webpack): use portable scss include paths

Rather than using relative paths for css imports - which can break when
we move files around - add our styles path to the webpack sass-loader
loader using the `includePaths` setting.

app/components/Activity/Activity.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .search {
   height: 55px;

app/components/Activity/ActivityModal/ActivityModal.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: relative;

app/components/Activity/Countdown/Countdown.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   display: block;

app/components/Activity/InvoiceModal/InvoiceModal.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   color: $white;

app/components/Activity/PaymentModal/PaymentModal.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   color: $white;

app/components/Activity/Transaction/Transaction.scss

@@ -1,4 +1,4 @@
-@import '../../../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   display: flex;

app/components/Activity/TransactionModal/TransactionModal.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   color: $white;

app/components/App/App.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .content {
   position: relative;

app/components/Contacts/AddChannel/AddChannel.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: relative;

app/components/Contacts/ChannelForm/ChannelForm.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: absolute;

app/components/Contacts/ConnectManually/ConnectManually.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: absolute;

app/components/Contacts/ContactModal/ContactModal.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .header {
   display: flex;

app/components/Contacts/ContactsForm/ContactsForm.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .modal {
   position: absolute;

app/components/Contacts/Network/Network.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .network {
   position: relative;

app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .content {
   padding: 0 40px;

app/components/Contacts/SuggestedNodes/SuggestedNodes.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   color: $white;

app/components/Form/Form.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: absolute;

app/components/Form/Pay/Pay.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   padding: 0 40px;

app/components/Form/Request/Request.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   padding: 0 40px;

app/components/GlobalError/GlobalError.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: absolute;

app/components/LoadingBolt/LoadingBolt.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   z-index: 1000;

app/components/Onboarding/Alias/Alias.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .alias {
   background: transparent;

app/components/Onboarding/Autopilot/Autopilot.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/BtcPayServer/BtcPayServer.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/ConnectionType/ConnectionType.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/FormContainer/FormContainer.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: relative;

app/components/Onboarding/InitWallet/InitWallet.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: relative;

app/components/Onboarding/Login/Login.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: relative;

app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .input:nth-child(2) {
   margin-top: 30px;

app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   font-size: 14px;

app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .seedContainer {
   display: flex;

app/components/Onboarding/RecoverForm/RecoverForm.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .seedContainer {
   position: relative;

app/components/Onboarding/Signup/Signup.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/Syncing/Syncing.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: relative;

app/components/Settings/Fiat/Fiat.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .submenuHeader {
   padding: 20px;

app/components/Wallet/ReceiveModal/ReceiveModal.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .container {
   position: relative;

app/components/Wallet/Wallet.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import 'styles/variables.scss';
 
 .wallet {
   background: $bluegrey;

webpack.config.renderer.dev.dll.js

@@ -72,7 +72,10 @@ export default merge.smart(baseConfig, {
             }
           },
           {
-            loader: 'sass-loader'
+            loader: 'sass-loader',
+            options: {
+              includePaths: [path.join(__dirname, 'app')]
+            }
           }
         ]
       },
@@ -93,7 +96,10 @@ export default merge.smart(baseConfig, {
             }
           },
           {
-            loader: 'sass-loader'
+            loader: 'sass-loader',
+            options: {
+              includePaths: [path.join(__dirname, 'app')]
+            }
           }
         ]
       },

webpack.config.renderer.dev.js

@@ -115,7 +115,11 @@ export default merge.smart(baseConfig, {
             }
           },
           {
-            loader: 'sass-loader'
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              includePaths: [path.join(__dirname, 'app')]
+            }
           }
         ]
       },
@@ -136,7 +140,11 @@ export default merge.smart(baseConfig, {
             }
           },
           {
-            loader: 'sass-loader'
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              includePaths: [path.join(__dirname, 'app')]
+            }
           }
         ]
       },

webpack.config.renderer.prod.js

@@ -59,7 +59,10 @@ export default merge.smart(baseConfig, {
               loader: 'css-loader'
             },
             {
-              loader: 'sass-loader'
+              loader: 'sass-loader',
+              options: {
+                includePaths: [path.join(__dirname, 'app')]
+              }
             }
           ],
           fallback: 'style-loader'
@@ -79,7 +82,10 @@ export default merge.smart(baseConfig, {
               }
             },
             {
-              loader: 'sass-loader'
+              loader: 'sass-loader',
+              options: {
+                includePaths: [path.join(__dirname, 'app')]
+              }
             }
           ]
         })