AngularJS元素指令上的CSS样式无法呈现

Question

所以我一直试图解决这个问题几天，似乎无法找到一个好的解决方案。

当我向AngularJS元素指令添加类时，样式显示在浏览器（Chrome）代码视图中，但样式未呈现。

我正在尝试为自定义指令元素“sss”添加背景颜色。

这是我的源代码：

_home-header.html （这是使用我的元素指令“sss”的地方）

<div class="home-dash-wrapper">
    <tone-today></tone-today>
    <div class="home-dash">
        <set-tone></set-tone>
        <sss></sss>
    </div>
</div>

_sss.html （这是元素指令的模板）

<div class="sign-in">
    <span>Welcome Anonymous | </span><span class="sign-in-button">Sign In</span>
</div>

_sss.scss （应用该样式的sass样式表）

sss{
    background-color: #E9E9EA;
}

.sign-in{
    width: 100%;
    padding: 10px;

    text-align: right;
}

_home.js （AngularJS指令声明）

var app = angular.module('tone-home', []);

app.directive('sss', function () {
    "use strict";
    return {
        restrict: 'E',
        templateUrl: 'app/src/templates/modules/_sss.html'
    };
});

Chrome屏幕截图（请注意背景颜色是如何在元素“sss”上设置的，但它没有在浏览器中呈现。“欢迎匿名|登录”文本应该被此背景颜色包围因为该文本在“sss”元素内。）

Answer 1

将display: block;添加到sss，您应该会看到背景颜色

Answer 2

浏览器无法理解元素SSS，因此它被忽略。使用调试工具，您应该看到SSS元素的大小为0 x 0，并且不会考虑您应用的元素样式。