Javascript 吞咽创建脚本以将css内联到头部
我很难清楚地表达我想要什么，但我肯定以前有人问过我这个问题。我正在寻找一种方法，使用gulp将预编译的CSS注入到运行时执行的javascript函数中。基本上是这样的： build/index.htmlJavascript 吞咽创建脚本以将css内联到头部,javascript,css,gulp,code-injection,Javascript,Css,Gulp,Code Injection,我很难清楚地表达我想要什么，但我肯定以前有人问过我这个问题。我正在寻找一种方法，使用gulp将预编译的CSS注入到运行时执行的javascript函数中。基本上是这样的： build/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
<div> <!-- content here --></div>
div {
background:red;
}
/* more rules */
<script>(function(){
var style=document.createElement('style');
style.innerHTML='div{background:red;} /* all the other rules */';
document.head.appendChild(style);
}());</script>
<div></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
<div> <!-- content here --></div>
div {
background:red;
}
/* more rules */
<script>(function(){
var style=document.createElement('style');
style.innerHTML='div{background:red;} /* all the other rules */';
document.head.appendChild(style);
}());</script>
<div></div>
（函数（）{
var style=document.createElement（'style'）；
style.innerHTML='div{background:red；}/*所有其他规则*/'；
document.head.appendChild（样式）；
}());
清楚了吗？你知道在这个过程中有什么帮助吗？这是我到目前为止所做的尝试 这是我的文件夹结构。使用
gulp将我的SCSS
文件编译为CSS
SCSS文件
body{
background-color: black;
}
body{
background-color: black;
}
CSS文件
body{
background-color: black;
}
body{
background-color: black;
}
script.js
(function(){
var style = document.createElement("style");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
style.innerHTML = this.responseText;
}
};
xhttp.open("GET","../css/style.css",true);
xhttp.send();
document.head.appendChild(style);
})();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
文件
这就是我所做的。我已经创建了一个iLife（立即调用的函数表达式），它创建了一个样式
元素。我正在向我的style.css
文件发出ajax请求，并获取其内容。最后，将其附加到标题
部分。我还没有包括链接
标签。我正在从JS加载样式
这是你期望的吗 对于其他有类似问题的人，我就是这样解决问题的。
从插件开始，我对他的代码做了一些小的修改，完全实现了我想要的。从一开始，插件是一个没有依赖关系的单一文件。你可以在屏幕上看到他的原始代码。这就是我想到的：
'use strict';
var through = require('through2');
/**
* Inject style tag with my minified, one-line css
*/
module.exports = function injectCSS() {
var stream = through.obj(function(file, enc, cb) {
var template = 'function injectStyles(rule) {\n' +
'var style = document.createElement("style");\n' +
'style.innerHTML = rule;\n' +
'document.head.appendChild(style);\n' +
'}\n' +
"injectStyles('" + file.contents + "');\n";
file.contents = new Buffer(template);
this.push(file);
cb();
});
return stream;
}
唯一需要注意的是，我发现除了CSS文件的开头，我无法在任何地方包括CSS媒体查询
和@关键帧
（我确信有一个解决方案，我只是没有深入研究）。所以，我只是创建了多个css文件，脚本执行了多次，从而创建了多个样式元素。下面是一个在页面加载时附加到我的HTML的示例
<script>
(function(){
function injectStyles(rule) {
var style = document.createElement("style");
style.innerHTML = rule;
document.head.appendChild(style);
}
injectStyles('@media(min-width:375px){.visible-content{margin-left:auto !important}}');
}());
</script>
（功能（）{
函数类型（规则）{
var style=document.createElement（“样式”）；
style.innerHTML=规则；
document.head.appendChild（样式）；
}
injectStyles（“@media（最小宽度：375px）{.visible content{margin left:auto！important}}”）；
}());
希望这对其他人有用！：） 这就是我尝试签出我的答案的原因。我可以利用task runner来解决这个问题吗，因为我有一个解决方案。不幸的是，没有-它都需要内联，因为没有包含外部文件的地方。我有一个解决方案，我将在第二时间发布。事实上，我找到了一些很好的方法。你会明白我的意思。