diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss
index 0f1f97d..c42de00 100644
--- a/_sass/jekyll-theme-chirpy.scss
+++ b/_sass/jekyll-theme-chirpy.scss
@@ -12,6 +12,7 @@
 
   "addon/module",
   "addon/variables",
+  "variables-hook",
   "addon/syntax",
   "addon/commons",
 
diff --git a/assets/css/variables-hook.scss b/_sass/variables-hook.scss
similarity index 59%
rename from assets/css/variables-hook.scss
rename to _sass/variables-hook.scss
index 22d4ab2..f27e0eb 100644
--- a/assets/css/variables-hook.scss
+++ b/_sass/variables-hook.scss
@@ -1,5 +1,3 @@
 /*
   Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
 */
-
-$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 92cbf59..6ff7046 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,16 +1,12 @@
 ---
 ---
 
-{% comment %} include the variables-hook if it exists {% endcomment %}
-
-{% assign hook = 'variables-hook.scss' %}
-{% assign _hook_path = hook | prepend: '/assets/css/' %}
-{% assign _hook_obj = site.static_files | where: 'path', _hook_path | first %}
-
-{% if _hook_obj %}
-  {% include_relative {{ hook }} %}
-{% endif %}
+/*
+  If the number of TAB files has changed, the following variable is required.
+  And it must be defined before `@import`.
+*/
+$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
 
 @import "{{ site.theme }}";
 
-// append your custom style below
+/* append your custom style below */