[Gulp] px2rem으로 px을 rem으로 변경하기

css 사용하던 중 px을 rem으로 변경할 필요가 있었다.

그래서 찾은 gulp-px2rem-converter !

 

설치하기

 npm i --save-dev gulp-px2rem-converter

 

기본 사용법

const gulp = require('gulp');
const pxToRem = require('gulp-px2rem-converter')

function css(){
    return gulp.src('./*.css')
    .pipe(pxToRem(10))
    .pipe(gulp.dest('./dist'))
}

module.exports.css = css;

 

내 방식으로 변형해서 아래처럼 사용했다.

import gulp from "gulp";
import pxToRem from "gulp-px2rem-converter";

const style = () =>
  gulp
    .src(dir.src.sass + "**/*.sass")
    .pipe(pxToRem("10px"))
    .pipe(gulp.dest(dir.dist.css));