文字列またはストリームでオートプレフィクサーを使用する

Question

babelプラグインを使用して、サルのインポートをAngular2の文字列に変換して、Gulpビルド時にコンポーネントコードにスタイルをインラインでインライン展開します。私は、文字列を扱うautoprefixerプラグインを見つけることを試みた

var css = sass.renderSync({ 
    'data': scss, 
    'outputStyle': 'compressed', 
    'includePaths': [dir] 
}).css.toString(); 

：基本的に、ここでCSSにSASSをレンダリングするコードの一部ですが、私はまたautoprefixerを使用する必要がありますが、私は私が働いていたソリューションを作ることができませんでしたrenderSyncの結果をストリームに変換しようとしましたが、ストリーム用のプラグインを使用しましたが、運はありませんでした。一時ファイルと自動プレフィックスにCSSを書き込む回避策を使用したくないので、私が見逃す可能性のある解決策がありますか？

Answer 1

autoprefixerは、postcssプラグインです。つまり、postcssで使用する必要があります。

postcssJavaScript APIは、指定されたプラグインを使用するプロセッサを作成することで機能します。その後、CSS文字列を.process()に渡します。これにより結果のCSSにアクセスできるPromiseが返されます。

var postcss = require('postcss'); 
var autoprefixer = require('autoprefixer'); 

var css = 'display: flex'; 

postcss([autoprefixer({ browsers: ['> 1%', 'last 2 versions'] })])  
    .process(css) 
    .then(function(result) { 
    console.log(result.css); 
    }) 

出力：

display: -webkit-box;display: -ms-flexbox;display: flex