私はNode.js を使用し、CSS にポスト プロセッサを使用することに非常に慣れていません。いくつかの記事を読んだ後、次のものをインストールできました。
私がやりたいのは、「pxtorem」プラグインを使用して、次の CSS プロパティの px 単位を rems に変換することです: font-size、margin、padding、border、width、height など。結果を新しい CSS スタイルシートに出力します。 .
質問:これを機能させるには、gulpfile.js 内に正確に何を入力する必要がありますか?
繰り返しますが、変数と要件の入力に関しては、私はまったく新しいものであり、ビデオとブログの例に従ってきましたが、ピクセルをレムに変換するための正しい式は特にありません (PostCSS には多くのプラグインがあるため)。
これは、現在の gulpfile.js に現在あるものです。
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtorem = require('gulp-pxtorem');
gulp.task('css', function() {
gulp.src('./css-1/*.css')
.pipe(pxtorem())
.pipe(gulp.dest('./dest'));
});
上記が本質的に行っていることは、「css-1」フォルダー内にある「styles-1.css」スタイルシート ファイルを取得し、「dest」フォルダー内にその複製を作成することです。PostCSS がどのように機能するかを理解するために読んでいた記事に従ってこのコードを入力しましたが、ピクセルを rem に変換するための正しいコードではないことは明らかです。
PS 現在、Windows 10 O/S を使用しています。