From aeb832d30a7614c5adcaa22a0267b26923f53b32 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Mon, 17 Sep 2018 17:01:11 +0200 Subject: [PATCH] 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 | 2 +- .../Activity/ActivityModal/ActivityModal.scss | 2 +- app/components/Activity/Countdown/Countdown.scss | 2 +- .../Activity/InvoiceModal/InvoiceModal.scss | 2 +- .../Activity/PaymentModal/PaymentModal.scss | 2 +- app/components/Activity/Transaction/Transaction.scss | 2 +- .../Activity/TransactionModal/TransactionModal.scss | 2 +- app/components/App/App.scss | 2 +- app/components/Contacts/AddChannel/AddChannel.scss | 2 +- app/components/Contacts/ChannelForm/ChannelForm.scss | 2 +- .../Contacts/ConnectManually/ConnectManually.scss | 2 +- .../Contacts/ContactModal/ContactModal.scss | 2 +- .../Contacts/ContactsForm/ContactsForm.scss | 2 +- app/components/Contacts/Network/Network.scss | 2 +- .../SubmitChannelForm/SubmitChannelForm.scss | 2 +- .../Contacts/SuggestedNodes/SuggestedNodes.scss | 2 +- app/components/Form/Form.scss | 2 +- app/components/Form/Pay/Pay.scss | 2 +- app/components/Form/Request/Request.scss | 2 +- app/components/GlobalError/GlobalError.scss | 2 +- app/components/LoadingBolt/LoadingBolt.scss | 2 +- app/components/Onboarding/Alias/Alias.scss | 2 +- app/components/Onboarding/Autopilot/Autopilot.scss | 2 +- .../Onboarding/BtcPayServer/BtcPayServer.scss | 2 +- .../ConnectionConfirm/ConnectionConfirm.scss | 2 +- .../ConnectionDetails/ConnectionDetails.scss | 2 +- .../Onboarding/ConnectionType/ConnectionType.scss | 2 +- .../Onboarding/FormContainer/FormContainer.scss | 2 +- app/components/Onboarding/InitWallet/InitWallet.scss | 2 +- app/components/Onboarding/Login/Login.scss | 2 +- .../NewWalletPassword/NewWalletPassword.scss | 2 +- .../Onboarding/NewWalletSeed/NewWalletSeed.scss | 2 +- .../Onboarding/ReEnterSeed/ReEnterSeed.scss | 2 +- .../Onboarding/RecoverForm/RecoverForm.scss | 2 +- app/components/Onboarding/Signup/Signup.scss | 2 +- app/components/Onboarding/Syncing/Syncing.scss | 2 +- app/components/Settings/Fiat/Fiat.scss | 2 +- app/components/Wallet/ReceiveModal/ReceiveModal.scss | 2 +- app/components/Wallet/Wallet.scss | 2 +- webpack.config.renderer.dev.dll.js | 10 ++++++++-- webpack.config.renderer.dev.js | 12 ++++++++++-- webpack.config.renderer.prod.js | 10 ++++++++-- 42 files changed, 65 insertions(+), 45 deletions(-) diff --git a/app/components/Activity/Activity.scss b/app/components/Activity/Activity.scss index de780487..4b9ce687 100644 --- a/app/components/Activity/Activity.scss +++ b/app/components/Activity/Activity.scss @@ -1,4 +1,4 @@ -@import '../../styles/variables.scss'; +@import 'styles/variables.scss'; .search { height: 55px; diff --git a/app/components/Activity/ActivityModal/ActivityModal.scss b/app/components/Activity/ActivityModal/ActivityModal.scss index c78908b0..0e5d77a5 100644 --- a/app/components/Activity/ActivityModal/ActivityModal.scss +++ b/app/components/Activity/ActivityModal/ActivityModal.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: relative; diff --git a/app/components/Activity/Countdown/Countdown.scss b/app/components/Activity/Countdown/Countdown.scss index 20ac30af..c17583f6 100644 --- a/app/components/Activity/Countdown/Countdown.scss +++ b/app/components/Activity/Countdown/Countdown.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { display: block; diff --git a/app/components/Activity/InvoiceModal/InvoiceModal.scss b/app/components/Activity/InvoiceModal/InvoiceModal.scss index b2846cac..b4c23eb1 100644 --- a/app/components/Activity/InvoiceModal/InvoiceModal.scss +++ b/app/components/Activity/InvoiceModal/InvoiceModal.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { color: $white; diff --git a/app/components/Activity/PaymentModal/PaymentModal.scss b/app/components/Activity/PaymentModal/PaymentModal.scss index 7ca269a8..15877bef 100644 --- a/app/components/Activity/PaymentModal/PaymentModal.scss +++ b/app/components/Activity/PaymentModal/PaymentModal.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { color: $white; diff --git a/app/components/Activity/Transaction/Transaction.scss b/app/components/Activity/Transaction/Transaction.scss index 31c760ed..f9cc4ff8 100644 --- a/app/components/Activity/Transaction/Transaction.scss +++ b/app/components/Activity/Transaction/Transaction.scss @@ -1,4 +1,4 @@ -@import '../../../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { display: flex; diff --git a/app/components/Activity/TransactionModal/TransactionModal.scss b/app/components/Activity/TransactionModal/TransactionModal.scss index 0a2c084a..0d9f6841 100644 --- a/app/components/Activity/TransactionModal/TransactionModal.scss +++ b/app/components/Activity/TransactionModal/TransactionModal.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { color: $white; diff --git a/app/components/App/App.scss b/app/components/App/App.scss index c7bd8a33..117d521c 100644 --- a/app/components/App/App.scss +++ b/app/components/App/App.scss @@ -1,4 +1,4 @@ -@import '../../styles/variables.scss'; +@import 'styles/variables.scss'; .content { position: relative; diff --git a/app/components/Contacts/AddChannel/AddChannel.scss b/app/components/Contacts/AddChannel/AddChannel.scss index b5647d9b..bf5ca9dd 100644 --- a/app/components/Contacts/AddChannel/AddChannel.scss +++ b/app/components/Contacts/AddChannel/AddChannel.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: relative; diff --git a/app/components/Contacts/ChannelForm/ChannelForm.scss b/app/components/Contacts/ChannelForm/ChannelForm.scss index 5c3b7dd2..66913917 100644 --- a/app/components/Contacts/ChannelForm/ChannelForm.scss +++ b/app/components/Contacts/ChannelForm/ChannelForm.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: absolute; diff --git a/app/components/Contacts/ConnectManually/ConnectManually.scss b/app/components/Contacts/ConnectManually/ConnectManually.scss index 09ce4eb3..e98cffc6 100644 --- a/app/components/Contacts/ConnectManually/ConnectManually.scss +++ b/app/components/Contacts/ConnectManually/ConnectManually.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: absolute; diff --git a/app/components/Contacts/ContactModal/ContactModal.scss b/app/components/Contacts/ContactModal/ContactModal.scss index d3456738..a3ab2584 100644 --- a/app/components/Contacts/ContactModal/ContactModal.scss +++ b/app/components/Contacts/ContactModal/ContactModal.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .header { display: flex; diff --git a/app/components/Contacts/ContactsForm/ContactsForm.scss b/app/components/Contacts/ContactsForm/ContactsForm.scss index 5f05729a..5967770b 100644 --- a/app/components/Contacts/ContactsForm/ContactsForm.scss +++ b/app/components/Contacts/ContactsForm/ContactsForm.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .modal { position: absolute; diff --git a/app/components/Contacts/Network/Network.scss b/app/components/Contacts/Network/Network.scss index 3e41f902..db5e9c43 100644 --- a/app/components/Contacts/Network/Network.scss +++ b/app/components/Contacts/Network/Network.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .network { position: relative; diff --git a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss index 260518af..b37b0a80 100644 --- a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss +++ b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .content { padding: 0 40px; diff --git a/app/components/Contacts/SuggestedNodes/SuggestedNodes.scss b/app/components/Contacts/SuggestedNodes/SuggestedNodes.scss index c4a73367..ad85f1c5 100644 --- a/app/components/Contacts/SuggestedNodes/SuggestedNodes.scss +++ b/app/components/Contacts/SuggestedNodes/SuggestedNodes.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { color: $white; diff --git a/app/components/Form/Form.scss b/app/components/Form/Form.scss index f405ac66..7c457752 100644 --- a/app/components/Form/Form.scss +++ b/app/components/Form/Form.scss @@ -1,4 +1,4 @@ -@import '../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: absolute; diff --git a/app/components/Form/Pay/Pay.scss b/app/components/Form/Pay/Pay.scss index 4181ceec..36de905f 100644 --- a/app/components/Form/Pay/Pay.scss +++ b/app/components/Form/Pay/Pay.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { padding: 0 40px; diff --git a/app/components/Form/Request/Request.scss b/app/components/Form/Request/Request.scss index 3b88bc05..60dece07 100644 --- a/app/components/Form/Request/Request.scss +++ b/app/components/Form/Request/Request.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { padding: 0 40px; diff --git a/app/components/GlobalError/GlobalError.scss b/app/components/GlobalError/GlobalError.scss index d748eed6..4ada7ce3 100644 --- a/app/components/GlobalError/GlobalError.scss +++ b/app/components/GlobalError/GlobalError.scss @@ -1,4 +1,4 @@ -@import '../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: absolute; diff --git a/app/components/LoadingBolt/LoadingBolt.scss b/app/components/LoadingBolt/LoadingBolt.scss index 963e286a..16a50730 100644 --- a/app/components/LoadingBolt/LoadingBolt.scss +++ b/app/components/LoadingBolt/LoadingBolt.scss @@ -1,4 +1,4 @@ -@import '../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { z-index: 1000; diff --git a/app/components/Onboarding/Alias/Alias.scss b/app/components/Onboarding/Alias/Alias.scss index 45722e2a..11a5827f 100644 --- a/app/components/Onboarding/Alias/Alias.scss +++ b/app/components/Onboarding/Alias/Alias.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .alias { background: transparent; diff --git a/app/components/Onboarding/Autopilot/Autopilot.scss b/app/components/Onboarding/Autopilot/Autopilot.scss index 41049686..d27905cf 100644 --- a/app/components/Onboarding/Autopilot/Autopilot.scss +++ b/app/components/Onboarding/Autopilot/Autopilot.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { color: $white; diff --git a/app/components/Onboarding/BtcPayServer/BtcPayServer.scss b/app/components/Onboarding/BtcPayServer/BtcPayServer.scss index 1a91e4cd..23a24908 100644 --- a/app/components/Onboarding/BtcPayServer/BtcPayServer.scss +++ b/app/components/Onboarding/BtcPayServer/BtcPayServer.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { color: $white; diff --git a/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss index 71efe1ff..cc1696e4 100644 --- a/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss +++ b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { color: $white; diff --git a/app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss b/app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss index 62b3c47e..8832dcbb 100644 --- a/app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss +++ b/app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { color: $white; diff --git a/app/components/Onboarding/ConnectionType/ConnectionType.scss b/app/components/Onboarding/ConnectionType/ConnectionType.scss index ebbd3497..86d94be4 100644 --- a/app/components/Onboarding/ConnectionType/ConnectionType.scss +++ b/app/components/Onboarding/ConnectionType/ConnectionType.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { color: $white; diff --git a/app/components/Onboarding/FormContainer/FormContainer.scss b/app/components/Onboarding/FormContainer/FormContainer.scss index 795990af..22c572b8 100644 --- a/app/components/Onboarding/FormContainer/FormContainer.scss +++ b/app/components/Onboarding/FormContainer/FormContainer.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: relative; diff --git a/app/components/Onboarding/InitWallet/InitWallet.scss b/app/components/Onboarding/InitWallet/InitWallet.scss index 9abc997e..937d5456 100644 --- a/app/components/Onboarding/InitWallet/InitWallet.scss +++ b/app/components/Onboarding/InitWallet/InitWallet.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: relative; diff --git a/app/components/Onboarding/Login/Login.scss b/app/components/Onboarding/Login/Login.scss index 2c796a34..77af231c 100644 --- a/app/components/Onboarding/Login/Login.scss +++ b/app/components/Onboarding/Login/Login.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: relative; diff --git a/app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss b/app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss index fc16b464..f653ad2e 100644 --- a/app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss +++ b/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; diff --git a/app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss b/app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss index 5f66edbf..3544f89c 100644 --- a/app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss +++ b/app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { font-size: 14px; diff --git a/app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss b/app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss index 51157ccf..5e88d706 100644 --- a/app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss +++ b/app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .seedContainer { display: flex; diff --git a/app/components/Onboarding/RecoverForm/RecoverForm.scss b/app/components/Onboarding/RecoverForm/RecoverForm.scss index 066b630d..f9284873 100644 --- a/app/components/Onboarding/RecoverForm/RecoverForm.scss +++ b/app/components/Onboarding/RecoverForm/RecoverForm.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .seedContainer { position: relative; diff --git a/app/components/Onboarding/Signup/Signup.scss b/app/components/Onboarding/Signup/Signup.scss index 7260cf0b..8c13e2d0 100644 --- a/app/components/Onboarding/Signup/Signup.scss +++ b/app/components/Onboarding/Signup/Signup.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { color: $white; diff --git a/app/components/Onboarding/Syncing/Syncing.scss b/app/components/Onboarding/Syncing/Syncing.scss index 6d28a538..99e3cd79 100644 --- a/app/components/Onboarding/Syncing/Syncing.scss +++ b/app/components/Onboarding/Syncing/Syncing.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: relative; diff --git a/app/components/Settings/Fiat/Fiat.scss b/app/components/Settings/Fiat/Fiat.scss index 8451f9d5..1319273a 100644 --- a/app/components/Settings/Fiat/Fiat.scss +++ b/app/components/Settings/Fiat/Fiat.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .submenuHeader { padding: 20px; diff --git a/app/components/Wallet/ReceiveModal/ReceiveModal.scss b/app/components/Wallet/ReceiveModal/ReceiveModal.scss index 42d1a35a..9ff4c74d 100644 --- a/app/components/Wallet/ReceiveModal/ReceiveModal.scss +++ b/app/components/Wallet/ReceiveModal/ReceiveModal.scss @@ -1,4 +1,4 @@ -@import '../../../styles/variables.scss'; +@import 'styles/variables.scss'; .container { position: relative; diff --git a/app/components/Wallet/Wallet.scss b/app/components/Wallet/Wallet.scss index 17a7e05a..a8cde7ea 100644 --- a/app/components/Wallet/Wallet.scss +++ b/app/components/Wallet/Wallet.scss @@ -1,4 +1,4 @@ -@import '../../styles/variables.scss'; +@import 'styles/variables.scss'; .wallet { background: $bluegrey; diff --git a/webpack.config.renderer.dev.dll.js b/webpack.config.renderer.dev.dll.js index f5255e0f..dd7c0bbf 100644 --- a/webpack.config.renderer.dev.dll.js +++ b/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')] + } } ] }, diff --git a/webpack.config.renderer.dev.js b/webpack.config.renderer.dev.js index a9aa4b18..8748f21e 100644 --- a/webpack.config.renderer.dev.js +++ b/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')] + } } ] }, diff --git a/webpack.config.renderer.prod.js b/webpack.config.renderer.prod.js index ff91c9a4..be30afe8 100644 --- a/webpack.config.renderer.prod.js +++ b/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')] + } } ] })