@ at-root里面的嵌套部分不起作用

Question

我有一个像这样的.scss文件：

#b-content-container {

    @import "_reset.scss";
    @import "_layout.scss";
    @import "_style.scss";

    @media only screen and (min-width: 768px) and (max-width: 999px) {
        @import "_768.scss";
    }

    @media only screen and (max-width: 479px) {
        @import "_320.scss";
    }

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        @import "_480.scss";
    }

}

内部_layout.scss：

@at-root {
    @import url(http://fonts.googleapis.com/css?family=Lato:300);
    @import url(http://fonts.googleapis.com/css?family=Lato:700);
    @import url(http://fonts.googleapis.com/css?family=Lato:900);
    @import url(http://fonts.googleapis.com/css?family=Lato:400);
    @import 'https://fonts.googleapis.com/css?family=Vollkorn'; 
}

/* ... rest of styling follows */

通常，@ import会被SASS剥离，因为它们不会包含在文档的根目录中，但根据我的理解，@ at-root应该通过在编译的顶部包含这些规则来防止这种情况发生。的CSS。但是，这种情况不会发生，规则只是正常排除。

这很好用：

@import url(http://fonts.googleapis.com/css?family=Lato:300);
@import url(http://fonts.googleapis.com/css?family=Lato:700);
@import url(http://fonts.googleapis.com/css?family=Lato:900);
@import url(http://fonts.googleapis.com/css?family=Lato:400);
@import 'https://fonts.googleapis.com/css?family=Vollkorn'; 

#b-content-container {

    @import "_reset.scss";
    @import "_layout.scss";
    @import "_style.scss";

    @media only screen and (min-width: 768px) and (max-width: 999px) {
        @import "_768.scss";
    }

    @media only screen and (max-width: 479px) {
        @import "_320.scss";
    }

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        @import "_480.scss";
    }

}

就像这样：

#b-content-container {

    @at-root {
        @import url(http://fonts.googleapis.com/css?family=Lato:300);
        @import url(http://fonts.googleapis.com/css?family=Lato:700);
        @import url(http://fonts.googleapis.com/css?family=Lato:900);
        @import url(http://fonts.googleapis.com/css?family=Lato:400);
        @import 'https://fonts.googleapis.com/css?family=Vollkorn'; 
    }

    @import "_reset.scss";
    @import "_layout.scss";
    @import "_style.scss";

    @media only screen and (min-width: 768px) and (max-width: 999px) {
        @import "_768.scss";
    }

    @media only screen and (max-width: 479px) {
        @import "_320.scss";
    }

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        @import "_480.scss";
    }

}

只有当置于部分内部时，字体导入根本不起作用。有办法解决这个问题吗？