角为4的KSS型导轨

Question

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

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

或者可能有另一个版本的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

不要忘记添加任务的其余部分，-源和-目的地。把它们加进去，现在效果很好！

Answer 1

您可以向ng build提供一个选项，将CSS从JS捆绑中排除，然后将该单独的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，而不是路径，这就是为什么我将样式表复制到样式指南输出目录进行部署的原因。

请参见我将其添加到自己的角项目中的提交：textbook/salary-stats@87dcb50 (deployed：薪酬统计风格指南)。