diff --git a/packages/services/screenshot/package.json b/packages/services/screenshot/package.json
index e31de146..4db1a861 100644
--- a/packages/services/screenshot/package.json
+++ b/packages/services/screenshot/package.json
@@ -18,6 +18,8 @@
"dependencies": {
"zhin": "workspace:^",
"vue": "^3.4.29",
+ "sass": "latest",
+ "less": "latest",
"esbuild": "^0.14.8",
"cheerio": "^1.0.0-rc.12",
"esbuild-plugin-vue3": "^0.4.2"
diff --git a/packages/services/screenshot/src/adapters/vueRenderer.ts b/packages/services/screenshot/src/adapters/vueRenderer.ts
index 66452ec8..6a6dc082 100644
--- a/packages/services/screenshot/src/adapters/vueRenderer.ts
+++ b/packages/services/screenshot/src/adapters/vueRenderer.ts
@@ -47,6 +47,11 @@ export class VueRenderer extends Renderer {
// 6 生成入口html
let entryHTMLContent = await readFile(path.join(templatePath, 'index.html'), 'utf8');
const outputJS = await readFile(path.join(templatePath, 'app.js'), 'utf8');
+ if (existsSync(path.join(templatePath, 'app.css'))) {
+ const cssFile = path.join(templatePath, 'app.css');
+ entryHTMLContent = entryHTMLContent.replace('{{STYLE}}', await readFile(cssFile, 'utf8'));
+ needRemoveFiles.push(cssFile);
+ }
entryHTMLContent = entryHTMLContent.replace('{{SCRIPT}}', outputJS);
// 7. 渲染
const result = await htmlRenderer.rendering(entryHTMLContent, options);
diff --git a/packages/services/screenshot/template/index.html b/packages/services/screenshot/template/index.html
index 44a2db82..83ff6821 100644
--- a/packages/services/screenshot/template/index.html
+++ b/packages/services/screenshot/template/index.html
@@ -3,6 +3,9 @@
Title
+
diff --git a/test/plugins/Test.vue b/test/plugins/Test.vue
index 46b82eb9..86f738d3 100644
--- a/test/plugins/Test.vue
+++ b/test/plugins/Test.vue
@@ -1,7 +1,14 @@
-
+
- hello world
+ hello {{ who }}
-
-
+
diff --git a/test/plugins/screenshot-test.ts b/test/plugins/screenshot-test.ts
index 1b9365ea..1416dde4 100644
--- a/test/plugins/screenshot-test.ts
+++ b/test/plugins/screenshot-test.ts
@@ -1,12 +1,16 @@
import { Plugin } from 'zhin';
+import fs from 'fs';
import '@zhinjs/plugin-screenshot';
import path from 'path';
const screenshotTest = new Plugin('screenshot');
screenshotTest.required('renderVue');
screenshotTest.mounted(async () => {
const result = await screenshotTest.renderVue(path.join(__dirname, 'Test.vue'), {
- encoding: 'base64',
+ props: {
+ who: '张三',
+ },
+ encoding: 'binary',
});
- console.log(result);
+ fs.writeFileSync(path.join(__dirname, 'test.jpg'), result);
});
export default screenshotTest;