mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-18 11:18:14 +08:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

📝 use dark-theme.js, antd.dark.less and css

Browse Source
This commit is contained in:
ycjcl868 2019-12-06 21:09:57 +08:00
parent 0024365962
commit 1ecf02b00a
3 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.antd-tools.config.js
View File

@ -60,16 +60,16 @@ function finalizeDist() {
// eslint-disable-next-line // eslint-disable-next-line
console.log('Built a entry less file to dist/antd.less'); console.log('Built a entry less file to dist/antd.less');
// Build less entry file: dist/dark.less // Build less entry file: dist/antd.dark.less
fs.writeFileSync( fs.writeFileSync(
path.join(process.cwd(), 'dist', 'dark.less'), path.join(process.cwd(), 'dist', 'antd.dark.less'),
'@import "../lib/style/dark.less";\n@import "../lib/style/components.less";', '@import "../lib/style/dark.less";\n@import "../lib/style/components.less";',
); );
// eslint-disable-next-line // eslint-disable-next-line
console.log('Built a entry less file to dist/dark.less'); console.log('Built a entry less file to dist/antd.dark.less');
// Build dark.js: dist/dark.js, for less-loader // Build dark.js: dist/dark-theme.js, for less-loader
const stylePath = path.join(process.cwd(), 'components', 'style'); const stylePath = path.join(process.cwd(), 'components', 'style');
const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8'); const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
@ -82,12 +82,12 @@ function finalizeDist() {
}); });
fs.writeFileSync( fs.writeFileSync(
path.join(process.cwd(), 'dist', 'dark.js'), path.join(process.cwd(), 'dist', 'dark-theme.js'),
`module.exports = ${JSON.stringify(darkPaletteLess, null, 2)};`, `module.exports = ${JSON.stringify(darkPaletteLess, null, 2)};`,
); );
// eslint-disable-next-line // eslint-disable-next-line
console.log('Built a dark theme js file to dist/dark.js'); console.log('Built a dark theme js file to dist/dark-theme.js');
} }
} }

6
docs/react/customize-theme.en-US.md
View File

@ -104,16 +104,16 @@ Note: This way will load the styles of all components, regardless of your demand
![](https://gw.alipayobjects.com/zos/antfincdn/wp6GpGo%26ID/f31e18a4-2018-4e12-95c6-998e7ac5b2fa.png) ![](https://gw.alipayobjects.com/zos/antfincdn/wp6GpGo%26ID/f31e18a4-2018-4e12-95c6-998e7ac5b2fa.png)
include `antd/dist/dark.less` in the style file: include `antd/dist/antd.dark.less` in the style file:
```less ```less
@import '~antd/dist/dark.less'; // Introduce the official dark less style entry file @import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file
``` ```
Another approach to using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed: Another approach to using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed:
```diff ```diff
const darkThemeVars = require('antd/dist/dark'); const darkThemeVars = require('antd/dist/dark-theme');
// webpack.config.js // webpack.config.js
module.exports = { module.exports = {

6
docs/react/customize-theme.zh-CN.md
View File

@ -104,16 +104,16 @@ module.exports = {
![](https://gw.alipayobjects.com/zos/antfincdn/wp6GpGo%26ID/f31e18a4-2018-4e12-95c6-998e7ac5b2fa.png) ![](https://gw.alipayobjects.com/zos/antfincdn/wp6GpGo%26ID/f31e18a4-2018-4e12-95c6-998e7ac5b2fa.png)
一种方式是在样式文件全量引入 `antd/dist/dark.less`： 一种方式是在样式文件全量引入 `antd/dist/antd.dark.less`：
```less ```less
@import '~antd/dist/dark.less'; // 引入官方提供的暗色 less 样式入口文件 @import '~antd/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件
``` ```
另一种是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入： 另一种是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
```diff ```diff
const darkThemeVars = require('antd/dist/dark'); const darkThemeVars = require('antd/dist/dark-theme');
// webpack.config.js // webpack.config.js
module.exports = { module.exports = {