styles.css is not generated

[ferllings]

Hello,

I have this in my kss-config.json:

  "css": [
    "public/styles.css"
  ],

But the file is not generated.

I've tried with:

kss-node --xdemo

But same result: the styles file is not added to the generated styleguide.

Thanks for your help

[ryanklarhoelter]

Similar issue here. I have three tasks configured: compass (to process my Sass/Compass files on change and generating the CSS files), styleguide (for generating the styleguide documents) and copy:styleguide (to copy all CSS files into the styleguide directory; I've linked my CSS files manually into the styleguide template, because the automatism doesn't work).

Apparently the generateStylesheet function doesn't work as it should. This is my styleguide configuration:

module.exports = function(grunt) {
    'use strict';
    grunt.config('styleguide', {
        options: {
            name: 'Styleguide',
            template: {
                src: '../Styleguide/Template/'
            },
            framework: {
                name: 'kss'
            }
        },
        all: {
            files: [{
                '../../Styleguide': '../Assets/Sass/**/*.scss'
            }]
        }
    });
};

The styleguide generation works but when it comes to compiling the Sass files it only processes the first file in the first directory:

...compiling additional stylesheets
 - ../Assets/Sass/Sources/_curlcontent.scss (sass)

Generation completed successfully!

If this file contains (for example) Sass variables that are declared in another file the generation fails (btw there is no option to define a Sass/Compass config file as I do in my Compass task – so the compiling can't work correctly anyway):

>> Error
Warning: Styleguide generation failed Use --force to continue.

Aborted due to warnings.

I would like to see an option for disabling the compiling fully.

[JohnAlbin]

kss-node does not generate CSS files. This option:

"css": [
  "public/styles.css"
],

tells kss-node to create HTML that loads CSS from a URL equal to "public/styles.css", which would be a path relative to the current page.

Since kss-node does not generate CSS, you need to ensure that your CSS files are in the right place for the static style guide HTML files to see.

[pccjamie]

@JohnAlbin - I'm a bit mystified as to how to make sure the static HTML reads my SCSS file correctly. I've tried several things and seem to be spinning my wheels a bit. Hope you're available to help for a minute?

I'm using a config file. It's very barebone at the moment, and looks like this:

{
  "//": "The source and destination paths are relative to this file.",
  "source": [
    "src/app/core"
  ],
  "destination": "styleguide/",
  "//": "The css and js paths are URLs relative to the generated style guide.",
  "css": [
    "src/app/core/app.scss"
  ],
  "js":[

  ]
}

This gives me a 404 error when I open up the page. I do see the generated markup but no CSS loaded. So then I edit the path to the CSS file a bit,

{
  "//": "The source and destination paths are relative to this file.",
  "source": [
    "src/app/core"
  ],
  "destination": "styleguide/",
  "//": "The css and js paths are URLs relative to the generated style guide.",
  "css": [
    "../src/app/core/app.scss"
  ],
  "js":[

  ]
}

And no error, but instead I get a 304 status code which I looked up but didn't find super helpful. Says it's loading CSS from cache. So then I edited the destination a bit:

{
  "//": "The source and destination paths are relative to this file.",
  "source": [
    "src/app/core"
  ],
  "destination": "styleguide",
  "//": "The css and js paths are URLs relative to the generated style guide.",
  "css": [
    "../src/app/core/app.scss"
  ],
  "js":[

  ]
}

and now get a 200 response but still no CSS and no other messages. Any thoughts?

[JohnAlbin]

I'm a bit mystified as to how to make sure the static HTML reads my SCSS file correctly.

The static HTML does not read Sass files. kss-node can read the KSS comments out of the SCSS file, but the generated style guide is regular HTML; it won't read Sass, nor will it convert Sass to CSS for you. You will need to generate the CSS and add the generated CSS to the style guide configuration:

{
  "//": "The source and destination paths are relative to this file.",
  "source": [
    "src/app/core"
  ],
  "destination": "styleguide",
  "//": "The css and js paths are URLs relative to the generated style guide.",
  "css": [
    "../path/to/the/generated/css/that/YOU/make/app.css"
  ],
  "js":[
  ]
}