Мы хотим реализовать руководство по стилю с помощью S CSS. Для немедленного документирования мы хотели бы использовать kss-node . Но когда мы запускаем узел kss, анализируется только первый файл s css. Все остальные импортированные файлы s css игнорируются. Есть ли у нас ошибка конфигурации? Или это проблема в kss?
Наша установка:
- проект веб-пакета со следующей структурой папок
> dist/
>> styleguide/..
>> scripts.js (will build with webpack)
>> styles.css (will build with webpack)
> src/
>> assets/..
>> scripts/..
>> styles/..
>>> building-blocks/..
>>> controls/..
>>> globals/
>>>> _colors.scss
>>>> _globals.scss
>>>> ..
>>> styles.scss
> kss-config.md
> kss-config.json
> package.json
> webpack.config.js
> ..
{
"title": "Title of the Style Guide",
"homepage": "kss-config.md",
"source": "src/styles/styles.scss",
"destination": "dist/styleguide/",
"css": ["../scripts.css"],
"js" : ["../scripts.js"]
}
- Части нашего пакета. json
{
..
"scripts": {
..
"kss": "./node_modules/.bin/kss --config ./kss-config.json"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"babel-loader": "^8.1.0",
..
"kss": "^3.0.0",
..
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"webpack": "^4.42.1"
..
},
"dependencies": {}
}
- Входной файл: стили. s css
// Components
//
// Some random text
//
// Styleguide Components
@import 'globals/globals';
@import 'controls/controls';
@import 'building-blocks/building-blocks';
- Другой файл в качестве примера: _globals.s css
// Article
//
// Some random text
//
// Styleguide Components.article
@import 'colors';
@import 'fonts';
@import 'theme';
@import 'media_queries';
@import 'typographie';
@import 'classes';
- В следующей части мы копируем журнал из запущенного kss с подробным
PS C:\PATH\PROJECT> ./node_modules/.bin/kss --config ./kss-config.json --verbose
...Parsing your style guide:
Building your KSS style guide!
* KSS Source : C:\PATH\PROJECT\src\styles\styles.scss
* Destination : C:\PATH\PROJECT\dist\styleguide
* Builder : C:\PATH\PROJECT\node_modules\michelangelo\kss_styleguide\custom-template
- C:/PATH/PROJECT/src/styles/styles.scss
...Determining section markup:
...Building style guide pages:
- homepage
- section Components [Components]
- item Components [Components]
Style guide build completed successfully!
Результат выглядит как
Было бы здорово если кто-то может помочь нам
С наилучшими пожеланиями Даниэль