[css 초기화] gulp-sass + node-normalize-scss

1. 설치

npm install node-normalize-scss@3.0.0

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');

const apfBrwsowsers = [
  'ie >= 8',
];

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

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

3. scss 삽입

common.scss:

@charset "utf-8";

@import '_normalize'; /* ★★★★ node-normalize-scss 호출 ★★★★ */

@import "layout-a", 'layout-b';

4. gulp 실행

gulp

5. 결과물

layout-a, layout-b, node-normalize-scss, 총 3개 파일이 dist > scss 에 common.css 파일 하나로 컴파일된다.

 

gulp-sass 관련 글:

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] - [gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 2

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