Variables template: import functions and variables

There are lots of questions on the issue tracker and StackOverflow about
why overriding a variable fails. In most of the cases, this happens when
the overriden variable value uses the value of another variable or a
function.

Importing variables and functions by default fixes most of
these issues.

2 files changed, 13 insertions, 3 deletions

diff --git a/tasks/updater/scss.rb b/tasks/updater/scss.rb
index c747b9a..a99876e 100644
--- a/tasks/updater/scss.rb
+++ b/tasks/updater/scss.rb
@@ -23,11 +23,18 @@ class Updater
       end
 
       log_status 'Generating variable template file'
+      template_file_header = <<-SCSS
+// Override Bootstrap variables here (defaults from bootstrap v#{upstream_version}):
+
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+
+SCSS
       save_file 'templates/project/_bootstrap-variables.scss',
-                "// Override Bootstrap variables here (defaults from bootstrap v#{upstream_version}):\n" +
+                template_file_header +
                     File.read("#{save_to}/_variables.scss").
                         # The instructions in the file header are replaced with the line above
-                        lines[4..-1].
+                        lines[5..-1].
                         join.
                         # Comment out the assignments
                         gsub(/^(?=[$@)}]|[ ]{2})/, '// ').
diff --git a/templates/project/_bootstrap-variables.scss b/templates/project/_bootstrap-variables.scss
index 29a6c8c..1025640 100644
--- a/templates/project/_bootstrap-variables.scss
+++ b/templates/project/_bootstrap-variables.scss
@@ -1,5 +1,8 @@
 // Override Bootstrap variables here (defaults from bootstrap v4.0.0-beta):
-//
+
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.