0

I use kss-node and trying out the simplest project. It just uses the example from the Quickstart guide.

The css is in source/style.css

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

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

I then run 

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

The first problem was that the --css option needs the relative path from where the styleguide later is.

But the hr element still looks the same and not 5px thick. The file is included in the html but Dev Tools says "0 rules" are applied

Saskia
  • 1,046
  • 1
  • 7
  • 23

3 Answers3

0

Could it have something to do with the "//" comments you are using in the css file? Try using a preprocessor and a styles.scss file as the source and then include the styles.css file that sass generates which won't have invalid "//" comments in them.

Robert
  • 1
  • That seems to defeat the purpose of a Living Styleguide if I have to add !important to all my rules, doesn't it. – Saskia Sep 26 '15 at 22:01
  • When I use /* */ comments kss-node reports an error that it couldn't find any documentation at all. – Saskia Sep 26 '15 at 22:06
0

This seems to working ` /* Hard rules

Markup:

Style guide: hard-rule */ `

https://github.com/rcaracaus/kss-test

Robert
  • 1
0

I reread the the documentation to kss-node. The recommended way seems to create a kss template and add the stylesheet in there.

I took the repo of Robert and executed

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

Then I added following line to my-template/index.html

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

Apparently the styles.css file won't be copied to the styleguide directory.

Although this doesn't answer my original question. I feel like it should work without a custom template. But this works for me.

Saskia
  • 1,046
  • 1
  • 7
  • 23