gulp-sassによるsassコンパイル時の文字コード指定

2021.03.17

gulp-sassでsassをコンパイルすると、scssファイル内に文字コードの指定があっても削除されます。

//layout.scss
@charset "UTF-8";

@import "page/_access.scss";
@import "page/by/_access_train.scss";
@import "page/by/_access_bus.scss";

sassコンパイル後のlayout.css内に文字コードの指定はありません。

//layout.css
.p-access {
  text-align: center;
}

.p-access-ttl {
  color: #ff0000;
}

.p-access-train {
  text-align: center;
}

.p-access-train-ttl {
  color: #ff0000;
}

.p-access-bus {
  text-align: center;
}

.p-access-bus-ttl {
  color: #ff0000;
}

ですが、読み込み元または読み込み先のscssファイル内にマルチバイト文字が含まれている場合、書き出したcssファイルの先頭に文字コードの指定が追加されます。以下は読み込み先scssファイル内のコメント部分にマルチバイト文字が含まれています。

//_access.scss
//読み込み先のscssファイル内にマルチバイト文字が存在
@charset "UTF-8";

$fontColor: #ff0000;

.p-access {
  text-align: center;

  &-ttl {
    /* タイトルカラー */
    color: $fontColor;
  }
}

//layout.css
//コンパイル後のcssファイルに文字コードの指定が追加される
@charset "UTF-8";
.p-access {
  text-align: center;
}

.p-access-ttl {
  /* タイトルカラー */
  color: #ff0000;
}

.p-access-train {
  text-align: center;
}

.p-access-train-ttl {
  color: #ff0000;
}

.p-access-bus {
  text-align: center;
}

.p-access-bus-ttl {
  color: #ff0000;
}

ですが、このままではcssファイル内の文字コード指定の有無がscssファイル内のマルチバイト文字の有無に依存することになります。そこでマルチバイト文字の有無にかかわらずcssファイルの先頭に文字コード指定が入るようにします。gulp-replaceとgulp-headerをインストールします。

//gulp-replaceとgulp-headerのインストール
npm install gulp-replace gulp-header

gulpfile.jsにgulp-replaceとgulp-headerの処理を追加します。コンパイル後のcssファイル内に文字コードの指定がある場合はgulp-replaceで削除し、gulp-headerでcssファイルの先頭に文字コードの指定を追加します。gulp-replaceとgulp-headerの実行はgulp-sass実行の後にする必要があります。

//gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const replace = require('gulp-replace');  //gulp-replaceの読み込み
const header = require('gulp-header');  //gulp-headerの読み込み

function styles() {
  return gulp
    .src('./src/scss/**/*.scss')
    .pipe(
      sass({
        outputStyle: 'expanded'
      })
    )
    .pipe(replace(/@charset "UTF-8";/g, ''))  //gulp-replaceの実行
    .pipe(header('@charset "UTF-8";\n\n'))  //gulp-headerの実行
    .pipe(
      gulp
        .dest('../assets/css')
    );
}

gulp.task('default', styles);

あらためてgulp-sassでsassをコンパイルします。scssファイルの条件にかかわらず、cssファイルの先頭に文字コードの指定が追加されます。

//layout.css
//コンパイル後のcssファイルに文字コードの指定が追加される
@charset "UTF-8";

.p-access {
  text-align: center;
}

.p-access-ttl {
  color: #ff0000;
}

.p-access-train {
  text-align: center;
}

.p-access-train-ttl {
  color: #ff0000;
}

.p-access-bus {
  text-align: center;
}

.p-access-bus-ttl {
  color: #ff0000;
}