Browse Source

chore: use dark-vars.js

pull/20281/head
ycjcl868 5 years ago
parent
commit
2aa9ab6791
  1. 14
      .antd-tools.config.js
  2. 20
      scripts/dark-vars.js
  3. 3
      site/theme/static/common.less
  4. 4
      site/theme/static/toc.less
  5. 6
      site/theme/template/Layout/index.jsx
  6. 15
      webpack.config.js

14
.antd-tools.config.js

@ -1,8 +1,8 @@
const fs = require('fs');
const path = require('path');
// eslint-disable-next-line import/no-extraneous-dependencies
const lessToJs = require('less-vars-to-js');
const packageInfo = require('./package.json');
const darkVars = require('./scripts/dark-vars');
// We need compile additional content for antd user
function finalizeCompile() {
@ -70,20 +70,10 @@ function finalizeDist() {
console.log('Built a entry less file to dist/antd.dark.less');
// Build dark.js: dist/dark-theme.js, for less-loader
const stylePath = path.join(process.cwd(), 'components', 'style');
const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
const darkPaletteLess = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
stripPrefix: true,
resolveVariables: false,
});
fs.writeFileSync(
path.join(process.cwd(), 'dist', 'dark-theme.js'),
`module.exports = ${JSON.stringify(darkPaletteLess, null, 2)};`,
`module.exports = ${JSON.stringify(darkVars, null, 2)};`,
);
// eslint-disable-next-line

20
scripts/dark-vars.js

@ -0,0 +1,20 @@
/**
* convert dark.less into js vars
*
* const darkVars = require('./dark-vars');
*/
const fs = require('fs');
const path = require('path');
const lessToJs = require('less-vars-to-js');
const stylePath = path.join(__dirname, '..', 'components', 'style');
const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
const darkPaletteLess = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
stripPrefix: true,
resolveVariables: false,
});
module.exports = darkPaletteLess;

3
site/theme/static/common.less

@ -12,6 +12,7 @@ body {
font-size: 14px;
font-family: @font-family;
line-height: 1.5;
background: #fff;
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@ -22,6 +23,7 @@ a {
.main-wrapper {
position: relative;
padding: 40px 0 0;
background: #fff;
}
.main-container {
@ -29,6 +31,7 @@ a {
min-height: 500px;
padding: 0 170px 144px 64px;
overflow: hidden;
background: #fff;
}
.main-menu {

4
site/theme/static/toc.less

@ -53,6 +53,7 @@ ul.toc > li {
max-height: ~'calc(100vh - 16px)';
overflow-x: hidden;
overflow-y: auto;
background: #fff;
}
}
@ -60,4 +61,7 @@ ul.toc > li {
position: absolute;
right: 20px;
bottom: 88px;
.ant-affix {
background: #fff;
}
}

6
site/theme/template/Layout/index.jsx

@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import { enquireScreen } from 'enquire-js';
import { IntlProvider } from 'react-intl';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import classNames from 'classnames';
import 'moment/locale/zh-cn';
import { ConfigProvider } from 'antd';
import LogRocket from 'logrocket';
@ -122,7 +121,7 @@ export default class Layout extends React.Component {
render() {
const { children, helmetContext = {}, ...restProps } = this.props;
const { appLocale, theme } = this.state;
const { appLocale } = this.state;
const title =
appLocale.locale === 'zh-CN'
? 'Ant Design - 一套企业级 UI 设计语言和 React 组件库'
@ -131,7 +130,6 @@ export default class Layout extends React.Component {
appLocale.locale === 'zh-CN'
? '基于 Ant Design 设计体系的 React UI 组件库,用于研发企业级中后台产品。'
: 'An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises';
const wrapperCls = classNames('page-wrapper', `page-theme-${theme}`);
return (
<HelmetProvider context={helmetContext}>
<Helmet encodeSpecialCharacters={false}>
@ -152,7 +150,7 @@ export default class Layout extends React.Component {
</Helmet>
<IntlProvider locale={appLocale.locale} messages={appLocale.messages} defaultLocale="en-US">
<ConfigProvider locale={appLocale.locale === 'zh-CN' ? zhCN : null}>
<div className={wrapperCls}>
<div className="page-wrapper">
<Header {...restProps} />
{children}
</div>

15
webpack.config.js

@ -2,10 +2,10 @@
// This config is for building dist files
const fs = require('fs');
const path = require('path');
const lessToJs = require('less-vars-to-js');
const getWebpackConfig = require('@ant-design/tools/lib/getWebpackConfig');
const PacktrackerPlugin = require('@packtracker/webpack-plugin');
const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
const darkVars = require('./scripts/dark-vars');
const { webpack } = getWebpackConfig;
@ -66,18 +66,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
config.module.rules.forEach(rule => {
// filter less rule
if (rule.test instanceof RegExp && rule.test.test('.less')) {
const stylePath = path.join(process.cwd(), 'components', 'style');
const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
rule.use[rule.use.length - 1].options.modifyVars = lessToJs(
`${colorLess}${defaultLess}${darkLess}`,
{
stripPrefix: true,
resolveVariables: false,
},
);
rule.use[rule.use.length - 1].options.modifyVars = darkVars;
}
});

Loading…
Cancel
Save