我尝试自定义 Keystonejs Admin UI 主题:更改原色等。
所以我要覆盖位于 node_modules 中的 keystone.less:
.
|____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 依赖:
"less": "2.7.2"
如 doc 中所述:
如果您希望 Keystone 自动将 .less 文件编译为 .css 文件,请将此值设置为与静态选项相同的路径。 设置此选项后,对 .css 或 .min.css 文件的任何请求将首先检查同名的 .less 文件,如果找到,将生成 css 文件。
所以我在 keystone.init 中添加了选项:
'less': ['public', 'public-app'],
但是当我构建和部署应用程序时,我在 keystone.min.css
中看不到任何变化样式没有变化。
我错过了什么?
最佳答案
对于我的解决方案,我执行了以下操作:
我添加了:可扩展的 theme.less 文件:
|____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;
}
在package.json中添加postinstall
脚本:
"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
所以通过这种方式,样式将被覆盖。
关于javascript - Keystonejs:自定义 Keystonejs 默认管理界面主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47678993/