我有一个使用 SCSS 的 Angular 4 应用程序,我们想使用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。添加了这些,现在它工作得很好!