Angular 4 的 KSS 样式指南
KSS Styleguide with Angular 4
我有一个 Angular 4 应用程序，我们使用 SCSS，我们想使用 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\_logs17-07-14T15_03_17_013Z-debug.log
C:\CARE\proto1-dev-hancojw\angular>
我已经确认正在创建 css 文件，但好像找不到它。
更新 2
不要忘记添加任务的其余部分 --source 和 --destination。添加了这些，现在效果很好！
您可以向 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 选项是 URL，而不是路径，这就是我将样式表复制到样式指南输出目录以进行部署的原因。
查看我将其添加到我自己的 Angular 项目的提交：textbook/salary-stats@87dcb50 (deployed result: Salary Stats Style Guide)。
我有一个 Angular 4 应用程序，我们使用 SCSS，我们想使用 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\_logs17-07-14T15_03_17_013Z-debug.log
C:\CARE\proto1-dev-hancojw\angular>
我已经确认正在创建 css 文件，但好像找不到它。
更新 2
不要忘记添加任务的其余部分 --source 和 --destination。添加了这些，现在效果很好！
您可以向 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 选项是 URL，而不是路径，这就是我将样式表复制到样式指南输出目录以进行部署的原因。
查看我将其添加到我自己的 Angular 项目的提交：textbook/salary-stats@87dcb50 (deployed result: Salary Stats Style Guide)。