gulp-scss-inline

compiler inline style with scss to css

Install

Using npm:

1npm i -D gulp-scss-inline

or using yarn:

1yarn add -D gulp-scss-inline

Using

1<style type="text/scss">
2  body {
3    .test {
4      h1 {
5        color: red;
6      }
7    }
8  }
9</style>

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

1<style type="text/css">
2  .test {
3    color: red;
4  }
5</style>

require packages

1const
2    gulp        = require('gulp'),
3    scssInline   = require('gulp-scss-inline'),
4    htmlMin     = require('gulp-htmlmin');

create task

1//only babel in Html
2gulp.task('scssInline', () =>
3    gulp.src([srcDir + '/**/*.html'])
4        .pipe(scssInline())
5        .pipe(gulp.dest(targetDir))
6);
7
8//used with html-min
9gulp.task('htmlMin', function () {
10    let minOptions = {
11        removeComments: true,
12        collapseWhitespace: true,
13        collapseBooleanAttributes: false,
14        removeEmptyAttributes: false,
15        removeScriptTypeAttributes: true,
16        removeStyleLinkTypeAttributes: true,
17        minifyJS: true,
18        minifyCSS: true
19    };
20    gulp.src([srcDir + '/**/*.html'])
21        .pipe(scssInline())
22        .pipe(htmlMin(minOptions))
23        .pipe(gulp.dest(targetDir));
24});