autoprefixerを使ってSassのコンパイルを行う際、少し前からエラーメッセージが表示されるようになったので、対応方法をメモ。
対応前
まずは対応前の状態を確認してみます。
今回はgulp、gulp-sass、autoprefixer、gulp-postcssをインストールして使用します。
gulpfile.jsの指定は以下のようにします。
gulpfile.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var gulp = require('gulp'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), autoprefixer = require('autoprefixer');gulp.task('sass', function () { return gulp.src(['./_src/sass/**/*.scss', '!./_src/sass/**/_*.scss']) .pipe(sass({ outputStyle : 'expanded' })) .pipe(postcss([ autoprefixer({browsers: ['last 2 versions']}) ])) .pipe(gulp.dest('assets/css/'));}); |
ブラウザのバージョン指定は「last 2 versions」にしています。
次にSassファイルを用意します。
style.scss
1 2 3 4 5 6 | .flex { display: flex;}.transform { transform: scale(1.5);} |
これで準備が完了しましたので、下記コマンドを実行してSassファイルをコンパイルします。
1 | gulp sass |
コンパイル自体は成功して、以下のようなファイルが生成されました。
style.css
1 2 3 4 5 6 7 8 9 10 | .flex { display: -webkit-box; display: -ms-flexbox; display: flex;}.transform { -webkit-transform: scale(1.5); transform: scale(1.5);} |
ただ、コンパイル時に以下のようなエラーメッセージが表示されていました。
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.If you really need to use option, rename it to overrideBrowserslist.
Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist
autoprefixerのブラウザ指定をgulpfile.jsからpackage.jsonまたは.browserslistrcというファイルに変更する必要があるようです。
package.jsonへの変更
ブラウザ指定をgulpfile.jsからpackage.jsonに変更してみます。
まずはgulpfile.jsから指定を削除します。
gulpfile.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var gulp = require('gulp'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), autoprefixer = require('autoprefixer');gulp.task('sass', function () { return gulp.src(['./_src/sass/**/*.scss', '!./_src/sass/**/_*.scss']) .pipe(sass({ outputStyle : 'expanded' })) .pipe(postcss([ autoprefixer() ])) .pipe(gulp.dest('assets/css/'));}); |
package.jsonに “browserslist”: [“指定1”, “指定2”] のような形で指定します。
package.json
1 2 3 4 5 6 7 8 | { "name": "sample", "version": "1.0.0", 〜 略 〜 "browserslist": [ "last 2 versions" ]} |
Sassのコンパイルを再度実行すると、先ほどと同じ内容にコンパイルできました。
.browserslistrcへの変更
次に.browserslistrcへの変更です。
先ほどと同様にgulpfile.jsから指定を削除した上で、.browserslistrcというファイルをプロジェクトルートに作成して、以下のように記述します。
.browserslistrc
1 2 | # autoprefixerのブラウザ指定last 2 versions |
行頭に#をつけるとコメントアウトになります。
Sassのコンパイルを再度実行すると、先ほどと同じ内容になりました。
コメントが承認されるまで時間がかかります。