From 2aa9ab67918bbe3767eeec99df4742fc48415887 Mon Sep 17 00:00:00 2001 From: ycjcl868 <45808948@qq.com> Date: Wed, 18 Dec 2019 22:42:09 +0800 Subject: [PATCH] chore: use dark-vars.js --- .antd-tools.config.js | 14 ++------------ scripts/dark-vars.js | 20 ++++++++++++++++++++ site/theme/static/common.less | 3 +++ site/theme/static/toc.less | 4 ++++ site/theme/template/Layout/index.jsx | 6 ++---- webpack.config.js | 15 ++------------- 6 files changed, 33 insertions(+), 29 deletions(-) create mode 100644 scripts/dark-vars.js diff --git a/.antd-tools.config.js b/.antd-tools.config.js index b64278b844..ecab481849 100644 --- a/.antd-tools.config.js +++ b/.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 diff --git a/scripts/dark-vars.js b/scripts/dark-vars.js new file mode 100644 index 0000000000..a28921b393 --- /dev/null +++ b/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; diff --git a/site/theme/static/common.less b/site/theme/static/common.less index a13d74b7c1..a8bbb53076 100644 --- a/site/theme/static/common.less +++ b/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 { diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less index 7f4f270a04..ed49ef636e 100644 --- a/site/theme/static/toc.less +++ b/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; + } } diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx index f91fac33e2..44bed778ad 100644 --- a/site/theme/template/Layout/index.jsx +++ b/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 ( @@ -152,7 +150,7 @@ export default class Layout extends React.Component { -
+
{children}
diff --git a/webpack.config.js b/webpack.config.js index abd79e3c10..8877754d8c 100644 --- a/webpack.config.js +++ b/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; } });