gulp-scss-inline

gulp-scss-inline

compiler inline style with scss to css

Install

Using npm:

npm i -D gulp-scss-inline

or using yarn:

yarn add -D gulp-scss-inline

Using

<style type="text/scss">
  body {
    .test {
      h1 {
        color: red;
      }
    }
  }
</style>

内容为css 且需要添加前缀 必须添加 type="text/css"

<style type="text/css">
  .test {
    color: red;
  }
</style>

require packages

const
    gulp        = require('gulp'),
    scssInline   = require('gulp-scss-inline'),
    htmlMin     = require('gulp-htmlmin');

create task

//only babel in Html
gulp.task('scssInline', () =>
    gulp.src([srcDir + '/**/*.html'])
        .pipe(scssInline())
        .pipe(gulp.dest(targetDir))
);

//used with html-min
gulp.task('htmlMin', function () {
    let minOptions = {
        removeComments: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: false,
        removeEmptyAttributes: false,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        minifyJS: true,
        minifyCSS: true
    };
    gulp.src([srcDir + '/**/*.html'])
        .pipe(scssInline())
        .pipe(htmlMin(minOptions))
        .pipe(gulp.dest(targetDir));
});