Стилгид KSS с угловой 4

Question

У меня есть приложение Angular 4, с которым мы используем SCSS, и мы хотели бы использовать KSS Styleguide для автоматического создания руководства по стилю. Проблема в том, что KSS нужно указывать на скомпилированный файл CSS, чтобы он мог отображать предварительный просмотр стилей. Однако, поскольку Angular 4 использует webpack, стили выгружаются в файл JS вместо файла.css.

Одна мысль, которую я имел, состояла в том, чтобы просто создать отдельную задачу для сборки KSS и скомпилировать SASS в файл css, используемый специально для KSS. Однако я хочу убедиться, что он компилируется так же, как и Angular. Я понятия не имею, как создать эту задачу.

Или, может быть, есть альтернативная версия KSS для Angular?

ОБНОВИТЬ:

Я пробовал решение, которое дал @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 чтобы исключить 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, а не пути, поэтому я копирую таблицу стилей в выходной каталог руководства по стилям для развертывания.

Посмотрите коммит, где я добавил его в свой собственный проект Angular: textbook/salary-stats@87dcb50 (развернутый результат: Salary Stats Style Guide).