KSS Styleguide與角4

Question

我有一個Angular 4應用程序，我們使用SCSS，我們想用KSS Styleguide來自動創建一個styleguide。問題是KSS需要指​​向一個已編譯的CSS文件，以便它可以顯示樣式的預覽。但是，由於Angular 4使用的是webpack，所以這些樣式被轉儲到JS文件中而不是.css文件中。

我想過的一件事就是創建一個單獨的任務來構建KSS並將SASS編譯爲專門用於KSS的css文件。我想確保它的編譯方式與Angular編譯它的方式相同。我不知道如何創建這個任務。

或者也許有一個替代版本的KSS爲Angular構建？

UPDATE：

我想，@jonrsharpe給瞭解決方案，但我收到的錯誤，它無法找到CSS文件。在這裏有我加入什麼的package.json

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

，這裏是錯誤消息我得到

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> 

我已經驗證正在創建CSS文件，它就像它無法找到它雖然。

更新2

不要忘了添加任務，--source --destination和的其餘位。添加了這些內容，現在它工作的很好！

Answer 1

您可以提供ng build的選項以從JS捆綁中排除CSS，然後將該單獨的CSS文件與其他任何選項一起傳遞給KSS。在package.json，我結束了類似：

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

注意，這僅包括全局樣式，而不是特定的組件封裝的造型。另請注意，css選項是網址，而不是路徑，這就是爲什麼我將樣式表複製到styleguide輸出目錄中進行部署的原因。

查看我將其添加到我自己的Angular項目中的提交：textbook/salary-stats@87dcb50（部署結果：Salary Stats Style Guide）。