# 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 中取出来。所以我们更换主题时只需要更换这两部分。