首頁猿問在...

在 Javascript/Node.js 中將 CSS 文件轉換為字符串

JavaScript

LEATH 2022-10-27 16:38:30

需要用 CSS 文件中的樣式制作一個 head 腳本標簽——如何解析styles/style.css成一個字符串來填充documentStyles變量？這發生在 Node.js 函數中。樣式.cssp { text-align: center;}index.jsconst documentStyles = // SOMETHING TO STRINGIFY style.cssconst document = ` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ${documentStyles} </style> </head> <body> <p>Here's the test</p> </body> </html>`

查看完整描述

2 回答

慕運維8079593

TA貢獻1876條經驗獲得超5個贊

您只需使用 NodeJS 加載 CSS 文件的內容fs.readFileSync。

const fs = require('fs');

try {

const documentStyles = fs.readFileSync('styles/style.css');

const document = `

<!DOCTYPE html>

<html>

<head>

<style>

${documentStyles}

</style>

</head>

<body>

</body>

</html>

} catch(e) {

console.log('Error:', e.stack);

}

反對回復 2022-10-27

慕的地6264312

TA貢獻1817條經驗獲得超6個贊

正如 Christos Lytras 所指出的，通過文件系統 (fs) 模塊在節點中獲取文件的字符串內容非常容易，但是如果您關心的是如何通過 API 獲取 JavaScript 可以使用的對象，您可能需要 CSSStyleSheet應用程序接口。

這個對象有一個.cssRules屬性，它包含一個類似數組的 cssRule對象列表。您將遍歷這些并檢查它們的type屬性（因為不同的規則類型具有不同的內部結構）。

大多數將具有type: 1，這意味著它們是 cssStyleRule對象，它們具有：

一個selector屬性（如.my-awesome-class），以及
一個style屬性（如{ font-size: 1.5em; color: hotpink; }）。

一旦達到這個級別，您可能需要使用正則表達式解析選擇器和樣式，除非它們都非常簡單。您將構建一個自定義對象以分配給您的documentStyles變量。

除此之外，您還需要將 CSS 的kebab-case名稱轉換為 JavaScript 的camelCase格式（或者您可能會在網上找到可以為您完成此操作的代碼。）

（這個問題的答案為您提供了一個深入研究樣式表以查找特定規則并檢查其樣式屬性的示例。）

反對回復 2022-10-27

2 回答
0 關注
587 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Javascript/Node.js 中將 CSS 文件轉換為字符串

在 Javascript/Node.js 中將 CSS 文件轉換為字符串

2 回答

添加回答