gulp如何把独立less文件编译成css后嵌入到html页面，变成嵌入式样式表？
我用的gulp，下载编译了less的gulp插件，但是less编译最终都是对应的css文件。
我想写个less文件，不想编译到独立css文件里面去，而是想把编译好的css弄到html页面的
<style type="text/css">
</style>中间，也就是嵌入式样式表，怎么处理呢？
因为这段样式没有引用独立css文件的必要，所以写成
<style type="text/css">
/* 嵌入式css内容 */
</style>的方式，怎么办？
展开
收起
1
条回答
写回答
写回答
-
IT从业方案
方案1：通过 gulp-replace 替换 link
（1）首先 html 页面中应该有对应 css 文件的 link 标签
（2）通过 gulp 把 link 标签替换成 style 标签的，并添加对应的 css 内容方案2：直接使用 gulp-inline-source
原文地址：直接看原文吧
方案示例：gulp-inline-source
github 地址：gulp-inline-source
资源准备
（1）./src/html/index.html。注意链接时后面的属性 inline
<html> <head> <script src="../js/site.js" inline></script> <link rel="stylesheet" href="../css/style.css" inline> </head> <body> </body> </html>（2）./src/css/style.css
h1{ font-size: 24px; color: red; }（3）./src/js/site.js
function hello(){ console.log('hello'); }（4）./gulpfile.js。执行后结果输出到 ./dist 文件夹
var gulp = require('gulp'); var inlinesource = require('gulp-inline-source'); gulp.task('default', function () { return gulp.src('./src/html/*.html') .pipe(inlinesource()) .pipe(gulp.dest('./dist')); });输出效果
<html> <head> <script>function hello(){console.log("hello")}</script> <style>h1{font-size:24px;color:red}</style> </head> <body> </body> </html>2019-07-17 19:33:34赞同 1 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
