sass(scss)をgulpでコンパイルすると、charsetが消えてしまう場合の対処法

sass(scss)をgulpでコンパイルすると、charsetが消えてしまう場合の対処法

sass(scss)をgulpでコンパイルすると、charsetが消えてしまうという現象にはまりました。いろいろ調べてみたけど、それらしい原因を見つけることができませんでした。誰か教えて下さい。。。

とはいえ、[@charset “utf-8”;]は表示させたいんですよね。ってことで今回は対処法をまとめます。

Ads

@charset “utf-8”;を出したい理由

font-familyのメイリオとかの日本語文字が文字化けしている。
文字化けはいかんよなってことで[@charset “utf-8”;]を表示させたいと思います。

※調べたとこによるとcssファイルに日本語を使っている場合は[@charset “utf-8”;]はコンパイルしても消されることはないとのことだったんですが、消えました。gulp-sassが原因なのか?

今回は前提としてscssファイルをコンパイルしてできたcssファイルに対して[@charset “utf-8”;]付与するということにします。

gulpを使ってscssファイルのコンパイルの仕方は今回は省かせていただきます。

わからない方は以下サイトを参考にするといいかもしれません
これからはじめるGulp #2:gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ

gulp-headerを使う

ファイルの先頭に任意の文字列を書き込むことができます。

今回はcssファイルの先頭に[@charset “utf-8”;]を書き込まれればOKですね。
では早速やってみましょう!!

gulp-headerをインストール

sudo npm install --save-dev gulp-header

これでインストールされているはずです。

gulpfileをごにょごにょする

var gulp = require('gulp'),
    header = require('gulp-header');

gulp.task('charset', function () {
    return gulp.src('css/style.css')
        .pipe(header('@charset "utf-8";\n\n'))
        .pipe(gulp.dest('css/'));
});

これでOKかなと

gulp charset

でcssファイルの先頭に[@charset “utf-8”;]が書き込まれているはずです。

さらにwatchしたければ・・・

gulp.task('watch', function(){
    gulp.watch('css/style.css', function(event) {
        gulp.run('charset');
    });
});

でwatchで監視できると思います。

いいなと思ったらシェアお願いします

同じタグで検索

Ads

同じカテゴリーの記事

ページの先頭へ