KSS Styleguide 中的元素不会被样式化答案

【问题标题】：Elements in KSS Styleguide won't get styledKSS Styleguide 中的元素不会被样式化
【发布时间】：2015-09-30 19:50:29
【问题描述】：

我使用 kss-node 并尝试了最简单的项目。它只是使用快速入门指南中的示例。

css 在source/style.css

// Hard rules
//
// Markup: <hr>
//
// Style guide: hard-rule

hr {
  border-top: 5px solid #999;
}

然后我运行

npm-exec kss-node --source source --destination styleguide --css ../source/style.css

第一个问题是--css 选项需要以后样式指南所在的相对路径。

但是 hr 元素看起来还是一样，不是 5px 厚。该文件包含在 html 中，但开发工具说应用了“0 规则”

【问题讨论】：

标签： kss

【解决方案1】：

这可能与您在 css 文件中使用的“//”cmets 有关吗？尝试使用预处理器和 styles.scss 文件作为源，然后包含 sass 生成的 style.css 文件，其中不会包含无效的“//”cmets。

【讨论】：

【解决方案2】：

这似乎有效 ` /* 硬性规定

标记：

风格指南：硬性规定 */ `

【讨论】：

【解决方案3】：

我重新阅读了 kss-node 的文档。推荐的方式似乎是创建一个 kss 模板并在其中添加样式表。

我接受了罗伯特的回购并执行了

npm-exec kss-node --init my-template

然后我在 my-template/index.html 中添加了以下行

<link rel="stylesheet" href="../source/styles.css">

显然styles.css文件不会被复制到styleguide目录中。

虽然这不能回答我原来的问题。我觉得它应该在没有自定义模板的情况下工作。但这对我有用。

【讨论】：