実現したいこと
GulpでAutoprefixerを使用し、cssファイルにベンダープレフィックスを付与したい。
前提
現在の作業ディレクトリは以下の通りです。
├── gulp │ ├── node_modules │ ├── gulpfile.js │ └── package.json │ └── package-lock.json ├── project │ ├── sass │ │ ├── style.scss │ ├── www │ │ ├── css │ │ │ ├── style.css │ │ ├── index.html
各種設定ファイルは以下の通りです。
gulpfile.js
gulp.task('sass', function() { return gulp.src('F:/MyDocuments/project/sass/**/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(postcss([autoprefixer({})])) .pipe(gulp.dest('F:/MyDocuments/project/www/css')); });
package.json
"browserslist": [ "last 3 versions", "ie >= 9", "Android >= 4" ]
発生している問題
上記の設定でgulp sassコマンドを実行したところ、コンパイルはエラーなく成功するのですが、出力されたcssファイルでベンダープレフィックスが付与されていませんでした。
コマンド実行結果
>gulp sass [16:34:30] Using gulpfile F:\MyDocuments\project\gulp\gulpfile.js [16:34:30] Starting 'sass'... [16:34:30] Finished 'sass' after 104 ms
cssファイルの出力結果
*, *::before, *::after { box-sizing: border-box; }
期待結果
本来は、以下のように出力されることを想定しておりました。
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
試したこと
「Autoprefixer CSS online」にて「Browserslist」を「last 3 version」とし、
*, *::before, *::after { box-sizing: border-box; }
に対して処理を実行したところ、
/* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 3 version */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
とベンダープレフィックスが付与されました。
また、gulpfile.jsで下記のように記載しコマンドを実行したところ、エラーメッセージが
出力されたのですが、作成されたcssファイルにはベンダープレフィックスが付与
されていることが確認できました。
gulpfile.js
gulp.task('sass', function() { return gulp.src('F:/MyDocuments/project/sass/**/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(postcss([ autoprefixer({ browsers: [ "last 3 versions", "ie >= 9", "Android >= 4" ] }) ])) .pipe(gulp.dest('F:/MyDocuments/project/www/css')); });
実行結果
>gulp sass [17:13:58] Using gulpfile F:\MyDocuments\gulp\gulpfile.js [17:13:58] Starting 'sass'... 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 [17:13:58] Finished 'sass' after 108 ms
cssファイルの出力結果
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
補足情報(FW/ツールのバージョンなど)
OS: Windows10
node.js: v14.15.1
npm: 6.14.8
パッケージのバージョンは以下の通りです。
package.json
"devDependencies": { "autoprefixer": "^10.0.4", "gulp": "^4.0.2", "gulp-changed": "^4.0.2", "gulp-debug": "^4.0.0", "gulp-imagemin": "^7.1.0", "gulp-notify": "^3.2.0", "gulp-postcss": "^9.0.0", "gulp-sass": "^4.1.0", "imagemin-mozjpeg": "^9.0.0", "imagemin-pngquant": "^9.0.1", "postcss": "^8.1.14" }
あなたの回答
tips
プレビュー