Google Apps Script侧边栏加载无CSS样式问题求助

修复方案 #

1. 修正模板引入语法 #

主HTML文件中的include标记语法错误，将两处<?!= include('xxx'); ?>修改为<?!= include('xxx'); ?>，Apps Script模板的打印输出语法要求问号后紧跟感叹号，写错会导致CSS、JS文件无法正常插入主页面，这是样式不生效的核心原因。

2. 替换为标准CSS语法 #

你当前的CSS使用了Sass/Less预处理器的嵌套语法、&父选择器，原生浏览器不支持该写法，需要将SidebarCSS.html内容替换为如下标准CSS：

<style>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
  @import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');
  body {
    color: #5D5F63;
    background: #293949;
    font-family: 'Open Sans',sans-serif;
    padding: 0;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  .sidebar-toggle {
    margin-left: -240px;
  }
  .sidebar {
    width: 240px;
    height: 100%;
    background: #293949;
    position: absolute;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 100;
  }
  #leftside-navigation ul, #leftside-navigation ul ul {
    margin: -2px 0 0;
    padding: 0;
  }
  #leftside-navigation ul li {
    list-style-type: none;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  #leftside-navigation ul li.active > a {
    color: #1abc9c;
  }
  #leftside-navigation ul li.active ul {
    display: block;
  }
  #leftside-navigation ul li a {
    color: #aeb2b7;
    text-decoration: none;
    display: block;
    padding: 18px 0 18px 25px;
    font-size: 12px;
    outline: 0;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
  }
  #leftside-navigation ul li a:hover {
    color: #1abc9c;
  }
  #leftside-navigation ul li a span {
    display: inline-block;
  }
  #leftside-navigation ul li a i {
    width: 20px;
  }
  #leftside-navigation ul li a i .fa-angle-left, #leftside-navigation ul li a i .fa-angle-right {
    padding-top: 3px;
  }
  #leftside-navigation ul ul {
    display: none;
  }
  #leftside-navigation ul ul li {
    background: #23313f;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    border-bottom: none;
  }
  #leftside-navigation ul ul li a {
    font-size: 12px;
    padding-top: 13px;
    padding-bottom: 13px;
    color: #aeb2b7;
  }
</style>

3. JS逻辑无需调整 #

你引入jQuery的写法正确，手风琴交互逻辑没有问题，完成上述两处修改后即可正常加载样式和交互功能。

内容的提问来源于stack exchange，提问作者Josh Bunzel