# 2 CSS樣式引入 **知識點：** /{{ THEME_DIR }}/{{ THEME }}/：當前主題的目錄 ## 引入流程 　　 1. horizon\openstack_dashboard\themes\maintenance\templates\base.html。 　　base.html為入口文件，css、js等文件在這里引入。CSS文件引入代碼為： ~~~ {% block css %} {% include "_stylesheets.html" %} {% endblock %} ~~~ 2. horizon\openstack_dashboard\themes\maintenance\templates\_stylesheets.html。 　　_stylesheets.html，所有的CSS文件都是通過這個文件來引入的。其引入方法為： ~~~ {% load compress %} {% load themes %} {% compress css %} CSS文件引入路徑 {% endcompress %} ~~~ 　　引入主題文件代碼： ~~~ {% with THEME=current_theme THEME_DIR=theme_dir %} {% compress css %} <style type="text/scss"> {% include 'themes/themes.scss' %} </style> {% endcompress %} {% endwith %} ~~~ 3. horizon\openstack_dashboard\themes\maintenance\templates\themes\themes.scss 　　themes.scss里有： My Themes、Horizon、Angular、HORIZON_CONFIG.scss_files、Custom Styles。下面分別對它們進行追蹤分析。 　　該文件里的代碼如下： ~~~ // My Themes @import "/{{ THEME_DIR }}/{{ THEME }}/variables"; // Horizon @import "/dashboard/scss/horizon.scss"; // Angular @import "/app/app"; {% for file in HORIZON_CONFIG.scss_files %} @import '/{{ file }}'; {% endfor %} // Custom Styles @import "/{{ THEME_DIR }}/{{ THEME }}/styles"; ~~~ 　　這五個部分，分別在2.1、2.2、2.3、2.4 和 2.5章節里介紹。看完這五節，我們替換主題時（比如將原來Bootswatch主題換成Ace主題）。 　　這時我們只需更改 2.1 My Themes 和 2.5 Custom Styles。這里可以簡單的理解為： 　　My Themes 里是定義CSS的變量值的（大小 ，顏色等）。Custom Styles里定義樣式，其用具體值從 MY Themes 中取出來。所以我們更換主題時只需要更換這兩部分。