Angular 4 的 KSS 样式指南

Question

我有一个使用 SCSS 的 Angular 4 应用程序，我们想使用 KSS Styleguide 自动创建样式指南。问题是 KSS 需要指向已编译的 CSS 文件，以便它可以显示样式的预览。但是，由于 Angular 4 使用 webpack，样式被转储到 JS 文件而不是 .css 文件中。

我的一个想法是创建一个单独的任务来构建 KSS 并将 SASS 编译为专门用于 KSS 的 css 文件。我想确保它的编译方式与 Angular 编译它的方式相同。我不知道如何创建这个任务。

或者也许有为 Angular 构建的 KSS 的替代版本？

更新：

我尝试了@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 选项是 URLs，而不是路径，这就是我将样式表复制到样式指南输出目录以进行部署的原因。

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