Keystonejs: настроить тему пользовательского интерфейса администратора Keystonejs по умолчанию

Question

Keystonejs: настроить тему пользовательского интерфейса администратора Keystonejs по умолчанию

1

Я пытаюсь настроить тему пользовательского интерфейса администратора Keystonejs: изменить основные цвета и т.д.

Поэтому я буду переопределять keystone.less, который находится в node_modules:

.
|____node_modules
| |____keystone
| | |____public
| | | |____styles
| | | | |____keystone.less

|____public
| |____styles
| | |____keystone.less // This will overwrite the UI

Новый keystone.less контент:

// Elemental
// ------------------------------

@import "@{elementalPath}/less/elemental.less";


// KEYSTONE VARIABLES
@import "../../node_modules/keystone/admin/public/styles/variables.less";

// KEYSTONE AUTH
@import "../../node_modules/keystone/admin/public/styles/auth.less";

// KEYSTONE SETUP
@import "../../node_modules/keystone/admin/public/styles/keystone/animation.less";
@import "../../node_modules/keystone/admin/public/styles/keystone/base.less";
@import "../../node_modules/keystone/admin/public/styles/keystone/dashboard.less";
@import "../../node_modules/keystone/admin/public/styles/keystone/forms.less";
@import "../../node_modules/keystone/admin/public/styles/keystone/navigation.less";
@import "../../node_modules/keystone/admin/public/styles/keystone/tables.less";
@import "../../node_modules/keystone/admin/public/styles/keystone/utils.less";

@import "../../node_modules/keystone/admin/public/styles/keystone/list.less";
@import "../../node_modules/keystone/admin/public/styles/keystone/list-dropzone.less";
@import "../../node_modules/keystone/admin/public/styles/keystone/item.less";
@import "../../node_modules/keystone/admin/public/styles/keystone/toolbar.less";

// COMPONENTS
@import "../../node_modules/keystone/admin/public/styles/keystone/wysiwyg.less";
@import "../../node_modules/keystone/admin/public/styles/keystone/popout.less";


// REACT FIELDS
@import "../../node_modules/keystone/admin/public/styles/react/react.less";


@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@brand-primary:         darken(#d326f6, 6.5%); // #337ab7
@brand-success:         #5cb85c;
@brand-info:            #d326f6;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;

@navbar-default-color:  green;

.primary-navbar {
  background-color: #d326f6;
  color: #d326f6;
  padding-bottom: .5em;
  padding-top: .5em;
}

Я добавил меньше зависимостей в package.json:

"less": "2.7.2"

Как описано в документе:

Если вы хотите, чтобы Keystone автоматически компилировал бездействующие файлы в файлы.css, установите это значение на тот же путь, что и статический параметр. Когда этот параметр установлен, любые запросы к файлу.css или.min.css будут сначала проверять файл без него с тем же именем, и если он будет найден, будет создан файл css.

Поэтому я добавил вариант keystone.init:

'less': ['public', 'public-app'],

Но когда я создаю и развертываю приложение, я не вижу никаких изменений в keystone.min.css

Никаких изменений в стилях.

Что я пропустил?

Bo. 06 дек. 2017, в 17:40

Источник

Теги:

javascript

node.js

less

frontend

keystonejs

2 ответа

Ещё вопросы

Bo. · Answer 1 · 2017-12-19T12-17-00.000Z

Для моего решения я сделал следующее:

Я добавил: extensible theme.less file:

|____public
| |____styles
| | |____theme.less

theme.less: содержание:

@import "../../node_modules/keystone/admin/public/styles/keystone.less";

@brand-primary:         darken(#d326f6, 6.5%); // #337ab7
@brand-success:         #5cb85c;
@brand-info:            #d326f6;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;

@link-color: #9c27b0;

.primary-navbar {
  background-color: #9c27b0;
  color: white;
  padding-bottom: .5em;
  padding-top: .5em;
}

Добавить скрипт postinstall в package.json:

"scripts": {
    "postinstall": "node scripts/admin-ui.js"
  }

Скрипт добавит строку import theme.less к node_modules/.../keystone.less

Содержимое скрипта:

const fs = require('fs');
const buff = fs.readFileSync('node_modules/keystone/admin/public/styles/keystone.less');
const content = buff.toString();

const styleLink = '@import "../../../../../public/styles/theme.less";';

if (content.includes(styleLink)) {
    return;
}

const newContent = content + '\n' + styleLink;
fs.writeFileSync('node_modules/keystone/admin/public/styles/keystone.less', newContent);

Это будет производительно на каждом npm i

Таким образом, стили будут завышены.

где вы будете ставить этот скрипт?
Я только что создал отдельный файл скрипта в каталоге с sctripts. И добавил «postinstall»: «node scripts / admin-ui.js» в «scripts» в package.json

Saka7 · Answer 2 · 2018-07-25T08-54-00.000Z

Вы можете применить свои пользовательские стили в файле ./keystone.js:

keystone.set('adminui custom styles', './public/styles/keystone.less');