KSS Styleguide with Angular 4

Question

I have an Angular 4 app that we use SCSS with and we would like to use KSS Styleguide to automatically create a styleguide. The issue is that KSS needs to be pointed at a compiled CSS file so it can show previews of the styles. However, because Angular 4 is using webpack, the styles are dumped into a JS file instead of a .css file.

One thought I had was to just create a separate task to build KSS and compile the SASS into a css file used specifically for KSS. I want to make sure it gets compiled the same way as Angular compiles it however. I have no idea how to create this task.

Or maybe there is an alternative version of KSS built for Angular?

UPDATE:

I tried the solution that @jonrsharpe gave but I'm receiving errors that it can't find the css file. Here is what I have added to package.json

"prestyleguide": "ng build --extract-css true",
"styleguide": "kss --css dist/styles.bundle.css ...",

And here is there error message I get

C:\CARE\proto1-dev-hancojw\angular>npm run prestyleguide

> CARE-Prototype@0.0.1 prestyleguide C:\CARE\proto1-dev-hancojw\angular
> ng build --extract-css true

Hash: 4bfb83655402eaeeeb22
Time: 18197ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 287 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 145 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.css, styles.bundle.css.map (styles) 122 bytes {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.66 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

C:\CARE\proto1-dev-hancojw\angular>npm run styleguide

> CARE-Prototype@0.0.1 prestyleguide C:\CARE\proto1-dev-hancojw\angular
> ng build --extract-css true

Hash: 4bfb83655402eaeeeb22
Time: 17213ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 287 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 145 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.css, styles.bundle.css.map (styles) 122 bytes {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.66 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

> CARE-Prototype@0.0.1 styleguide C:\CARE\proto1-dev-hancojw\angular
> kss --css dist/styles.bundle.css ...

Error: ENOENT: no such file or directory, scandir 'C:\CARE\proto1-dev-hancojw\angular\...'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! CARE-Prototype@0.0.1 styleguide: `kss --css dist/styles.bundle.css ...`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the CARE-Prototype@0.0.1 styleguide script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\HancoJW\AppData\Roaming\npm-cache\_logs\2017-07-14T15_03_17_013Z-debug.log

C:\CARE\proto1-dev-hancojw\angular>

I have verified that the css file is being created, its like it can't find it though.

UPDATE 2

Don't forget to add the remaining bits of the task, --source and --destination. Added those in and now it's working great!

Answer 1

You can provide an option to ng build to exclude the CSS from the JS bundling, then pass that separate CSS file to KSS along with any other options you have. In package.json, I ended up with something like:

"prestyleguide": "ng build --extract-css true",
"styleguide": "kss --css styles.bundle.css ...",
"poststyleguide": "cp dist/styles.bundle.css styleguide/",

Note that this will only include the global styles, not the component-specific encapsulated styling. Also note that the css options are URLs, not paths, which is why I copy the stylesheet into the styleguide output directory for deployment.

See the commit where I added it to my own Angular project: textbook/salary-stats@87dcb50 (deployed result: Salary Stats Style Guide).