Meteor - 模板 - CSS 样式问题答案

【问题标题】：Meteor - Templates - CSS Styling issuesMeteor - 模板 - CSS 样式问题
【发布时间】：2016-03-03 04:47:16
【问题描述】：

我目前遇到一个问题，即带有模板的元素会使用 [[#each]] 进行迭代。

问题在于 CSS 样式不会影响它们。我正在使用 Stylus 编写 CSS。这个问题不仅限于我自己的自定义 CSS 样式，还会影响 BootStrap 样式。唯一可行的是内联 CSS，但显然这不是最好的方法。

应用程序的代码可以在这里找到：https://github.com/smeloa/fcc-voting-app

我在代码中包含了一个示例，其中：

<template name="Poll">
    <div class="poll-card" style="border: solid">
        <h3>{{question}}</h3>
        <p>
            {{#each options}}
                {{option}} - {{votes}}
            {{/each}}
        </p>
    </div>
</template>

只渲染边框样式，即使有一个css样式说：

/* My Poll Styles */
.poll-card
    margin-top 20px
    color red

感谢您的帮助。

【问题讨论】：

标签： css templates meteor

【解决方案1】：

问题是您原始 styles.styl 中的第一行以 TAB 字符开头。手写笔弄乱了生成的 css 文件。您可以在浏览器中检查 css 文件时查看问题。

出于同样的原因，您可能在最终的 css 类周围输入了 {} 以防止 Stylus 编译器错误。

删除标签并用空格替换它们。

【讨论】：

【解决方案2】：

您的手写笔代码格式错误：https://github.com/smeloa/fcc-voting-app/blob/master/client/styles/styles.styl#L245 这可能是个问题。

【讨论】：

不幸的是我已经解决了这个问题，问题仍然存在。当我运行程序时，没有任何迭代模板的 CSS 样式出现（在开发工具上查看）。

【解决方案3】：

我通过为每个模板创建单独的样式表解决了这个问题。可能会占用网站的每个部分并以相同的方式破坏它。

例如，对于创建表单以添加新投票的 NewPoll.html，我创建了一个 NewPoll.styl。这成功了。

【讨论】：