システム側の都合やレガシーサイトのリニューアルにもかかわらず、文字コードが変更できない場合など、開発時にタスクランナー(ここでは「gulp」)を利用して、開発は「UTF-8」、コンパイル時に他の文字コードへ変換することで対応する。
https://www.npmjs.com/package/gulp-convert-encoding
https://www.npmjs.com/package/gulp-header
用途例:Sassを「UTF-8」で開発し、コンパイル時に他の文字コードへ変換する
install
$ npm i -D gulp-convert-encoding
$ npm i -D gulp-header
Usage Basic
var gulp = require('gulp');
var sass = require('gulp-sass');
var convertEncoding = require('gulp-convert-encoding');// 文字コードを変換
var header = require('gulp-header'); //@charset宣言を先頭追加する為に使用
gulp.task('styles', function () {
return gulp.src('src')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(header('@charset "EUC-JP";\n'))// @charset 宣言を追加
.pipe(convertEncoding({to: "EUC-JP"}))
.pipe(gulp.dest('dist')) //任意のフォルダー[htdocs/assets/css]とか
});
※結論としてHTMLとCSSで文字コードが違っても、CSSの先頭で文字コード宣言すればよいかと。
※HTML5では、aタグ、linkタグのcharset属性が廃止
参考:(エディターパッケージ)
https://atom.io/packages/auto-encoding
https://github.com/seanliang/ConvertToUTF8