问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

gulp如何把独立less文件编译成css后嵌入到html页面，变成嵌入式样式表？

头像
安静的木马
    95720127142

    我用的gulp，下载编译了less的gulp插件，但是less编译最终都是对应的css文件。
    我想写个less文件，不想编译到独立css文件里面去，而是想把编译好的css弄到html页面的

    <style type="text/css">
</style>

    中间，也就是嵌入式样式表，怎么处理呢？
    因为这段样式没有引用独立css文件的必要，所以写成

    <style type="text/css">
/* 嵌入式css内容 */
</style>

    的方式，怎么办？

    gulpjavascriptcsshtmlhtml5
    阅读 5k
    1 个回答
    得票最新
    头像
    HereChen
      2293714
      ✓ 已被采纳

      方案

      方案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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题