带有Angular 4的KSS Styleguide [英] KSS Styleguide with Angular 4

问题描述

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

I have an Angular 4 app that we use SCSS with and we would like to use KSS Styleguide to automatically create a styleguide. The issue is that KSS needs to be pointed at a compiled CSS file so it can show previews of the styles. However, because Angular 4 is using webpack, the styles are dumped into a JS file instead of a .css file.

我曾经想过要创建一个单独的任务来构建KSS，然后将SASS编译成专门用于KSS的css文件.我想确保它的编译方式与Angular编译的方式相同.我不知道如何创建此任务.

One thought I had was to just create a separate task to build KSS and compile the SASS into a css file used specifically for KSS. I want to make sure it gets compiled the same way as Angular compiles it however. I have no idea how to create this task.

也许还有为Angular构建的KSS的替代版本?

Or maybe there is an alternative version of KSS built for Angular?

更新:

我尝试了@jonrsharpe提供的解决方案，但收到的错误是找不到css文件.这是我添加到package.json

I tried the solution that @jonrsharpe gave but I'm receiving errors that it can't find the css file. Here is what I have added to 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文件，但是好像找不到它.

I have verified that the css file is being created, its like it can't find it though.

更新2

别忘了添加任务的其余部分--source和--destination.添加了这些功能，现在一切正常！

Don't forget to add the remaining bits of the task, --source and --destination. Added those in and now it's working great!

推荐答案

您可以为ng build提供一个选项，以将CSS从JS捆绑中排除，然后将该单独的CSS文件与您拥有的任何其他选项一起传递给KSS .在package.json中，我得到了类似以下内容:

You can provide an option to ng build to exclude the CSS from the JS bundling, then pass that separate CSS file to KSS along with any other options you have. In package.json, I ended up with something like:

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

请注意，这将仅包括全局样式，而不包括特定于组件的封装样式.另外请注意，css选项是 URL ，而不是路径，这就是为什么我将样式表复制到styleguide输出目录中进行部署的原因.

Note that this will only include the global styles, not the component-specific encapsulated styling. Also note that the css options are URLs, not paths, which is why I copy the stylesheet into the styleguide output directory for deployment.

查看提交到我自己的Angular项目中的提交: textbook/salary-stats@87dcb50 (部署结果:工资统计样式指南 ).

See the commit where I added it to my own Angular project: textbook/salary-stats@87dcb50 (deployed result: Salary Stats Style Guide).

这篇关于带有Angular 4的KSS Styleguide的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！