Skip to content

Commit

Permalink
fix: add theme bundle files (#5012)
Browse files Browse the repository at this point in the history
close #5007
  • Loading branch information
hsuanxyz committed Apr 13, 2020
1 parent 174099e commit dc8fe9d
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 33 deletions.
3 changes: 3 additions & 0 deletions components/ng-zorro-antd.compact.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import "./style/compact.less";
@import "./style/entry.less";
@import "./components.less";
3 changes: 3 additions & 0 deletions components/ng-zorro-antd.dark.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import "./style/dark.less";
@import "./style/entry.less";
@import "./components.less";
7 changes: 3 additions & 4 deletions docs/customize-theme.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,12 +131,11 @@ We have some official themes, try them out and give us some feedback!

### Method 1

include `ng-zorro-antd/style/dark.less` or `ng-zorro-antd/style/compact.less` in the style file to override theme variables.
Import `ng-zorro-antd.dark.less` or `ng-zorro-antd.compact.less` in the style file.

```less
@import "ng-zorro-antd/ng-zorro-antd.less";
@import "~ng-zorro-antd/style/dark.less"; // Introduce the official dark less style file
@import "~ng-zorro-antd/style/compact.less"; // Introduce the official compact less style file
@import "~ng-zorro-antd/ng-zorro-antd.dark.less"; // Import the official dark less style file
@import "~ng-zorro-antd/ng-zorro-antd.compact.less"; // Import the official compact less style file
```

### Method 2
Expand Down
7 changes: 3 additions & 4 deletions docs/customize-theme.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,12 +131,11 @@ module.exports = {

### 方式一

是在样式文件引入 `ng-zorro-antd/style/dark.less``ng-zorro-antd/style/compact.less` 覆盖主题变量。
是在样式文件全量引入 `ng-zorro-antd.dark.less``ng-zorro-antd.compact.less` 覆盖主题变量。

```less
@import "ng-zorro-antd/ng-zorro-antd.less";
@import "~ng-zorro-antd/style/dark.less"; // 引入官方提供的暗色 less 样式文件
@import "~ng-zorro-antd/style/compact.less"; // 引入官方提供的紧凑 less 样式文件
@import "~ng-zorro-antd/ng-zorro-antd.dark.less"; // 引入官方提供的暗色 less 样式文件
@import "~ng-zorro-antd/ng-zorro-antd.compact.less"; // 引入官方提供的紧凑 less 样式文件
```

### 方式二
Expand Down
54 changes: 29 additions & 25 deletions scripts/build/compile-styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ function compileLess(content: string, savePath: string, min: boolean, sub?: bool
}

return less
.render(content, lessOptions)
.then(({ css }) => {
fs.writeFileSync(savePath, css);
resolve();
})
.catch(err => reject(err));
.render(content, lessOptions)
.then(({ css }) => {
fs.writeFileSync(savePath, css);
resolve();
})
.catch(err => reject(err));
});
}

Expand All @@ -50,20 +50,24 @@ export function compile(): Promise<void | Less.RenderOutput[]> {
// Compile less files to CSS and delete the `entry.less` file.
const buildFilePath = `${sourcePath}/${dir}/style/entry.less`;
if (fs.existsSync(buildFilePath)) {
promiseList.push(compileLess(
fs.readFileSync(buildFilePath, { encoding: 'utf8' }),
path.join(targetPath, dir, 'style', `index.css`),
false,
true,
buildFilePath
));
promiseList.push(compileLess(
fs.readFileSync(buildFilePath, { encoding: 'utf8' }),
path.join(targetPath, dir, 'style', `index.min.css`),
true,
true,
buildFilePath
));
promiseList.push(
compileLess(
fs.readFileSync(buildFilePath, { encoding: 'utf8' }),
path.join(targetPath, dir, 'style', `index.css`),
false,
true,
buildFilePath
)
);
promiseList.push(
compileLess(
fs.readFileSync(buildFilePath, { encoding: 'utf8' }),
path.join(targetPath, dir, 'style', `index.min.css`),
true,
true,
buildFilePath
)
);
}
}
});
Expand All @@ -72,21 +76,21 @@ export function compile(): Promise<void | Less.RenderOutput[]> {
fs.copySync(path.resolve(sourcePath, 'style'), path.resolve(targetPath, 'style'));
fs.writeFileSync(`${targetPath}/components.less`, fs.readFileSync(`${sourcePath}/components.less`));
fs.writeFileSync(`${targetPath}/ng-zorro-antd.less`, fs.readFileSync(`${sourcePath}/ng-zorro-antd.less`));
fs.writeFileSync(`${targetPath}/ng-zorro-antd.dark.less`, fs.readFileSync(`${sourcePath}/ng-zorro-antd.dark.less`));
fs.writeFileSync(`${targetPath}/ng-zorro-antd.compact.less`, fs.readFileSync(`${sourcePath}/ng-zorro-antd.compact.less`));

// Compile concentrated less file to CSS file.
const lessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.less')}";`;
promiseList.push(compileLess(lessContent, path.join(targetPath, 'ng-zorro-antd.css'), false));
promiseList.push(compileLess(lessContent, path.join(targetPath, 'ng-zorro-antd.min.css'), true));

// Compile the dark theme less file to CSS file.
const darkLessContent = `@import "${path.posix.join(targetPath, 'style', 'dark.less')}";
@import "${path.posix.join(targetPath, 'ng-zorro-antd.less')}";`;
const darkLessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.dark.less')}";`;
promiseList.push(compileLess(darkLessContent, path.join(targetPath, 'ng-zorro-antd.dark.css'), false));
promiseList.push(compileLess(darkLessContent, path.join(targetPath, 'ng-zorro-antd.dark.min.css'), true));

// Compile the compact theme less file to CSS file.
const compactLessContent = `@import "${path.posix.join(targetPath, 'style', 'compact.less')}";
@import "${path.posix.join(targetPath, 'ng-zorro-antd.less')}";`;
const compactLessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.compact.less')}";`;
promiseList.push(compileLess(compactLessContent, path.join(targetPath, 'ng-zorro-antd.compact.css'), false));
promiseList.push(compileLess(compactLessContent, path.join(targetPath, 'ng-zorro-antd.compact.min.css'), true));

Expand All @@ -95,5 +99,5 @@ export function compile(): Promise<void | Less.RenderOutput[]> {
const cssIndex = fs.readFileSync(cssIndexPath, { encoding: 'utf8' });
promiseList.push(compileLess(cssIndex, path.join(targetPath, 'style', 'index.css'), false, true, cssIndexPath));
promiseList.push(compileLess(cssIndex, path.join(targetPath, 'style', 'index.min.css'), true, true, cssIndexPath));
return Promise.all(promiseList).catch(e => console.log(e))
return Promise.all(promiseList).catch(e => console.log(e));
}

0 comments on commit dc8fe9d

Please sign in to comment.