Keystonejs: fertige Keystonejs Standard Admin UI Thema

Question

Ich versuche Keystonejs Admin UI Thema anpassen: Grundfarben ändern, usw.

So keystone.less außer Kraft zu setzen, ich werde das in node_modules befindet:

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

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

New keystone.less Inhalt:

// 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; 
} 

ich habe weniger Abhängigkeit in package.json:

"less": "2.7.2" 

Wie in doc beschrieben:

Wenn Sie Keystone automatisch .Weniger Dateien in CSS-Dateien zusammenstellen, diesen Wert auf den gleichen Weg wie die statischen Möglichkeit. Wenn diese Option aktiviert ist, werden alle Anforderungen an eine .css- oder .min.css-Datei zuerst nach einer .less-Datei mit demselben Namen suchen, und wenn eine gefunden wird, wird die CSS-Datei generiert.

So habe ich Option keystone.init:

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

Aber wenn ich Anwendung erstellen und bereitstellen ich in keystone.min.css keine Änderungen sehen

keine Änderungen in verschiedenen Schnitten.

Was habe ich verpasst?

Answer 1

Für meine Lösung Ich habe folgende:

I hinzugefügt: erweiterbare theme.less Datei:

|____public 
| |____styles 
| | |____theme.less 

theme.less: Inhalt:

@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; 
} 

hinzufügen postinstall Skript in package.json:

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

Script wird import theme.less String node_modules/.../keystone.less

Script Inhalt hinzufügen:

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); 

Es wird utomatically auf jeder npm i

So durch diese Weise Stile außer Kraft gesetzt werden.