Question

我有一个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\_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）。

带有Angular 4的KSS Styleguide

1 个答案: