在 Javascript/Node.js 中将 CSS 文件转换为字符串
需要用 CSS 文件中的样式制作一个 head 脚本标签——如何解析styles/style.css成一个字符串来填充documentStyles变量？这发生在 Node.js 函数中。
样式.css
p {
text-align: center;
}
index.js
const documentStyles = // SOMETHING TO STRINGIFY style.css
const document = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
${documentStyles}
</style>
</head>
<body>
<p>Here's the test</p>
</body>
</html>
`
LEATH浏览 491回答 2
2回答
-
慕运维8079593
您只需使用 NodeJS 加载 CSS 文件的内容fs.readFileSync。const fs = require('fs');try { const documentStyles = fs.readFileSync('styles/style.css'); const document = ` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ${documentStyles} </style> </head> <body> <p>Here's the test</p> </body> </html>`;} catch(e) { console.log('Error:', e.stack);} -
慕的地6264312
正如 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格式（或者您可能会在网上找到可以为您完成此操作的代码。）（这个问题的答案为您提供了一个深入研究样式表以查找特定规则并检查其样式属性的示例。）
随时随地看视频慕课网APP
相关分类
JavaScript