From 53e663ab611bb04ab30c5704b21350990947fbbc Mon Sep 17 00:00:00 2001 From: ycjcl868 <45808948@qq.com> Date: Tue, 3 Dec 2019 16:47:12 +0800 Subject: [PATCH] tweak: antd dark theme in as required usage --- .antd-tools.config.js | 22 ++++++++++++++++++++++ docs/react/customize-theme.en-US.md | 20 +++++--------------- docs/react/customize-theme.zh-CN.md | 16 +++------------- package.json | 3 ++- 4 files changed, 32 insertions(+), 29 deletions(-) diff --git a/.antd-tools.config.js b/.antd-tools.config.js index 50c7a5536b..e7a23e3f8f 100644 --- a/.antd-tools.config.js +++ b/.antd-tools.config.js @@ -1,5 +1,7 @@ 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'); // We need compile additional content for antd user @@ -66,6 +68,26 @@ function finalizeDist() { // eslint-disable-next-line console.log('Built a entry less file to dist/antd-dark.less'); + + // Build antd-dark.js: dist/antd-dark.js, for less-loader + const stylePath = path.join(process.cwd(), 'lib', '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}`, { + resolveVariables: false, + stripPrefix: true, + }); + + fs.writeFileSync( + path.join(process.cwd(), 'dist', 'antd-dark.js'), + `module.exports = ${JSON.stringify(darkPaletteLess, null, 2)};`, + ); + + // eslint-disable-next-line + console.log('Built a dark theme js file to dist/antd-dark.js'); } } diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index 5858aca623..44dc13474a 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -22,8 +22,8 @@ There are some major variables below, all less variables could be found in [Defa @font-size-base: 14px; // major text font size @heading-color: rgba(0, 0, 0, 0.85); // heading text color @text-color: rgba(0, 0, 0, 0.65); // major text color -@text-color-secondary : rgba(0, 0, 0, .45); // secondary text color -@disabled-color : rgba(0, 0, 0, .25); // disable state color +@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color +@disabled-color: rgba(0, 0, 0, 0.25); // disable state color @border-radius-base: 4px; // major border radius @border-color-base: #d9d9d9; // major border color @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers @@ -112,18 +112,8 @@ include `antd/dist/antd-dark.less` in the style file: Another approach to using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed: -```js -const lessToJs = require('less-vars-to-js'); -const fs = require('fs'); - -const colorLess = fs.readFileSync(require.resolve('antd/lib/style/color/colors.less'), 'utf8'); -const defaultLess = fs.readFileSync(require.resolve('antd/lib/style/themes/default.less'), 'utf8'); -const darkLess = fs.readFileSync(require.resolve('antd/lib/style/themes/dark.less'), 'utf8'); - -const darkThemeVars = lessToJs(`${colorLess}${defaultLess}${darkLess}`, { - resolveVariables: false, - stripPrefix: false, -}) +````js +const darkThemeVars = require('antd/dist/antd-dark'); // webpack.config.js module.exports = { @@ -159,7 +149,7 @@ It's possible to configure webpack to load an alternate less file: new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') ) #antd { @import '~antd/es/style/core/index.less'; @import '~antd/es/style/themes/default.less'; } -``` +```` Where the src/myStylesReplacement.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector : the result is that all of the "global" styles are being applied with the #antd scope. diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 294a8045ea..a0639e386f 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -22,8 +22,8 @@ antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定 @font-size-base: 14px; // 主字号 @heading-color: rgba(0, 0, 0, 0.85); // 标题色 @text-color: rgba(0, 0, 0, 0.65); // 主文本色 -@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色 -@disabled-color : rgba(0, 0, 0, .25); // 失效色 +@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色 +@disabled-color: rgba(0, 0, 0, 0.25); // 失效色 @border-radius-base: 4px; // 组件/浮层圆角 @border-color-base: #d9d9d9; // 边框色 @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影 @@ -113,17 +113,7 @@ module.exports = { 另一种是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入： ```js -const lessToJs = require('less-vars-to-js'); -const fs = require('fs'); - -const colorLess = fs.readFileSync(require.resolve('antd/lib/style/color/colors.less'), 'utf8'); -const defaultLess = fs.readFileSync(require.resolve('antd/lib/style/themes/default.less'), 'utf8'); -const darkLess = fs.readFileSync(require.resolve('antd/lib/style/themes/dark.less'), 'utf8'); - -const darkThemeVars = lessToJs(`${colorLess}${defaultLess}${darkLess}`, { - resolveVariables: false, - stripPrefix: false, -}) +const darkThemeVars = require('antd/dist/antd-dark'); // webpack.config.js module.exports = { diff --git a/package.json b/package.json index 1d7204d1a0..b071871dc7 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "prop-types": "^15.7.2", "raf": "^3.4.1", "rc-animate": "^2.10.2", -"rc-calendar": "~9.15.7", + "rc-calendar": "~9.15.7", "rc-cascader": "~1.0.0-alpha.0", "rc-checkbox": "~2.1.6", "rc-collapse": "~1.11.3", @@ -201,6 +201,7 @@ "jest": "^24.8.0", "jsdom": "^15.1.1", "jsonml.js": "^0.1.0", + "less-vars-to-js": "^1.3.0", "logrocket": "^1.0.0", "logrocket-react": "^4.0.0", "lz-string": "^1.4.4",