[gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 2

이제, 브라우져 버전에 맞춰 css 컴파일해보자. 

1. 설치

npm install --save-dev gulp-postcss autoprefixer@9.8.5

2. gulpfile.js 설정

const sass = require('gulp-sass'); 
const sourcemaps = require('gulp-sourcemaps'); 
const Fiber = require('fibers');
const dartSass = require('dart-sass');
const autoprefixer = require('autoprefixer'); // ★★★★ 고려할 브라우저 버전 설정
const postcss = require('gulp-postcss'); // ★★★★ 위 브라우저에 맞춰 css 컴파일

// ★★★★ autoprefixer 옵션: 브라우저 버전 지정
const apfBrwsowsers = [
  'ie >= 8', // 익스플로러 버전 8 이상
];

gulp.task('sass', function(){
  const options = {
    sass : {
      outputStyle: 'expanded',
      indentType: 'tab',
      indentWidth: 1, 
      compiler: dartSass
    },
    postcss: [ autoprefixer({ // ★★★★ add
      overrideBrowserslist: apfBrwsowsers,
    }) ]
  };
  return gulp
    .src("src/scss/*.scss") 
    .pipe(sourcemaps.init()) 
    .pipe(sass({fiber:Fiber}).on('error', sass.logError))
    .pipe(postcss(options.postcss)) // ★★★★ add
    .pipe(sourcemaps.write('./maps')) 
    .pipe(gulp.dest("dist/css")) 
});

gulp.task(
    "default",
    gulp.parallel("sass") 
);

3. gulp 실행

gulp

4. 결과물

src > scss > a.scss: 컴파일 전 파일

div {
 display: flex;
}

dist > css > common.css: 컴파일 후 생성된 파일

div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

---

브라우저 옵션은 아래 링크에서 확인 가능하다.

browserslist/browserslist

 

2021/01/07 - [web/gulp] - gulp 설치 + .src() .pipe() .dest()

2021/01/08 - [web/gulp] - [gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 1

2021/01/08 - [web/gulp] - [css 초기화] gulp-sass + node-normalize-scss

2021/01/08 - [web/gulp] - [로컬 테스트 서버] browser-sync + gulp-sass : scss 수정하고 바로 확인하자