带有 Angular 4 的 KSS 样式指南 [英] KSS Styleguide with Angular 4

问题描述

我有一个使用 SCSS 的 Angular 4 应用，我们想使用 KSS Styleguide 自动创建样式指南.问题是 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 提供一个选项以从 JS 捆绑中排除 CSS，然后将该单独的 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 选项是 URLs，而不是路径，这就是我将样式表复制到 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 项目的提交:教科书/salary-stats@87dcb50(部署结果:Salary Stats Style Guide).

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 样式指南的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！