31550


cssnextを使っているのですが、IE8のサポートが切れたのでremに自動にpxを加える機能をなくしたいのですが、セットになっているので、これだけ外すことはできないのでしょうか？

<https://github.com/robwierzbowski/node-pixrem>  
を見ても英語で完全にはわからず翻訳してもそれらしい記述が見つかりません。

どなたか、ご存じないでしょうか？  
初心者にもわかるように解説してくれる方お願いします。

テラテイルで聞いていたのですが、回答がないのでこちらで聞くことにしました。


CC BY-SA 3.0
2016-12-30T05:55:40.947
31539
2017-01-02T08:04:22.367
2017-01-02T08:04:22.367
3054
14320
question
css gulp postcss
cssnext から rem に自動で px を加える機能をなくしたい


端的には下記のようになります。

[code]

    postcss([
        cssnext({
            features: {
                rem: false
            }
        })
    ])
    
[/code]

* * *

（例示コードは Gulp での利用を想定しています）

cssnext の話なので、まずは [cssnext のドキュメント](http://cssnext.io/usage/)をあたるのがよいです。  
`browsers` オプションの利用が推奨されていますが、これを使うにはまず
[Browserslist](https://github.com/ai/browserslist) について理解する必要がありますから、今回は
`features` を指定する方法を示します。

cssnext をカスタマイズなしに使う場合は通常、`require('postcss-cssnext')` の戻り値をそのまま `postcss`
に渡しますが、これは呼び出し可能な関数になっており、オプションを指定するオブジェクトを渡して呼び出す事で、カスタマイズされたプロセッサが作られます。

[code]

    const cssnext = require('postcss-cssnext');
    const cssnextWithoutRem = cssnext({
        features: {
            rem: false,
        },
    });
    
[/code]

冗長ですが上のように書くと、変数 `cssnextWithoutRem` に `rem` の機能が無効化されたプロセッサが代入されます。  
素の `cssnext` の代りに、このプロセッサを `postcss` に渡すプラグインとして使います。  
上の冗長な書き方に従い `gulpfile.js` を記述すると、例えば下記のようになります。

[code]

    // gulpfile.js
    // src -> dest
    
    const gulp = require("gulp");
    const postcss = require('gulp-postcss');
    
    const cssnext = require('postcss-cssnext');
    const cssnextWithoutRem = cssnext({
        features: {
            rem: false,
        },
    });
    
    const cssPlugins = [
        cssnextWithoutRem,
    ];
    
    gulp.task("css", function(){
        gulp.src('./src/**/*.css')
            .pipe(postcss(cssPlugins))
            .pipe(gulp.dest('./dest/'));
    });
    
    gulp.task("default", ["css"]);
    
[/code]


CC BY-SA 3.0
2016-12-31T09:11:12.570
31550
2017-01-01T07:07:30.740
2017-01-01T07:07:30.740
3054
3054
31539
answer