Use Bootstrap variables in styles

app/styles/Album.scss

@@ -1,5 +1,8 @@
+$rowMarginTop: 30px;
+$rowMarginBottom: 10px;
+
 .row {
-    margin-top: 30px;
+    margin-top: $rowMarginTop;
 }
 
 .art {
@@ -22,19 +25,10 @@
         float: none;
         display: inline-block;
         vertical-align: middle;
-        margin-bottom: 10px;
+        margin-bottom: $rowMarginBottom;
     }
 
     .songs {
-        > thead,
-        > tbody,
-        > tfoot {
-            > tr {
-                > th,
-                > td {
-                    padding: 5px;
-                }
-            }
-        }
+        composes: songs from "./Songs.scss";
     }
 }

app/styles/Login.scss

@@ -1,5 +1,7 @@
+$titleImage-size: $font-size-h1 + 10px;
+
 .titleImage {
-    height: 46px;
+    height: $titleImage-size;
 }
 
 @media (max-width: 767px) {

app/styles/Songs.scss

@@ -6,7 +6,7 @@
             > tr {
                 > th,
                 > td {
-                    padding: 5px;
+                    padding: $table-condensed-cell-padding;
                 }
             }
         }

app/styles/elements/FilterBar.scss

@@ -1,10 +1,12 @@
+$marginBottom: 34px;
+
 .filter {
-    margin-bottom: 34px;
+    margin-bottom: $marginBottom;
 }
 
 .legend {
     text-align: right;
-    line-height: 34px;
+    line-height: $marginBottom;
 }
 
 @media (max-width: 767px) {

app/styles/elements/Grid.scss

@@ -1,5 +1,8 @@
+$marginBottom: 30px;
+$artMarginBottom: 10px;
+
 .placeholders {
-    margin-bottom: 30px;
+    margin-bottom: $marginBottom;
     text-align: center;
 }
 
@@ -9,7 +12,7 @@
 
 .art {
     display: inline-block;
-    margin-bottom: 10px;
+    margin-bottom: $artMarginBottom;
     width: 75%;
     height: auto;
 

app/styles/layouts/Sidebar.scss

@@ -3,6 +3,10 @@ $hoverBackground: #222;
 $activeBackground: $hoverBackground;
 $foreground: white;
 $lightgrey: #eee;
+$titleFontSize: $font-size-h1 - 10px;
+$titleMarginBottom: 20px;
+$mainPadding: 20px;
+$condensedNavPadding: 5px;
 
 .sidebar {
     position: fixed;
@@ -46,12 +50,12 @@ $lightgrey: #eee;
 
 .title {
     margin: 0;
-    margin-bottom: 20px;
-    font-size: 26px;
+    margin-bottom: $titleMarginBottom;
+    font-size: $titleFontSize;
 }
 
 .imgTitle {
-    height: 36px;
+    height: $font-size-h1;
 }
 
 /* Sidebar navigation */
@@ -81,7 +85,7 @@ $lightgrey: #eee;
  * Main content
  */
 .main-panel {
-    padding: 20px;
+    padding: $mainPadding;
 }
 
 /*
@@ -103,8 +107,8 @@ $lightgrey: #eee;
     .nav {
         li {
             a {
-                padding-left: 5px;
-                padding-right: 5px;
+                padding-left: $condensedNavPadding;
+                padding-right: $condensedNavPadding;
             }
         }
     }

app/styles/variables.scss

@@ -0,0 +1,3 @@
+// Make variables and mixins available when using CSS modules.
+@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables";
+@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_mixins";

package.json

@@ -69,6 +69,7 @@
     "resolve-url-loader": "^1.6.0",
     "rimraf": "^2.5.4",
     "sass-loader": "^4.0.0",
+    "sass-resources-loader": "^1.0.2",
     "style-loader": "^0.13.1",
     "stylelint": "^7.0.3",
     "stylelint-config-standard": "^11.0.0",

webpack.config.base.js

@@ -49,7 +49,8 @@ module.exports = {
                     "style-loader",
                     "css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]" +
                     "!postcss-loader" +
-                    "!sass-loader"
+                    "!sass-loader" +
+                    "!sass-resources-loader"
                 )
             },
             {
@@ -81,6 +82,8 @@ module.exports = {
 
     postcss: [autoprefixer({ browsers: browsers }), postcssReporter({ throwError: true, clearMessages: true })],
 
+    sassResources: "./app/styles/variables.scss",
+
     resolve: {
         // Include empty string "" to resolve files by their explicit extension
         // (e.g. require("./somefile.ext")).