如何在 Node.js 中使用 Autoprefixer

Question

根據官方文檔，這很簡單：

用法：

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

postcss([ autoprefixer ]).process(css).then(function (result) {
    result.warnings().forEach(function (warn) {
        console.warn(warn.toString());
    });
    console.log(result.css);
});

但是，我對如何建立對象css與process()一起使用感到困惑。 我嘗試使用fs.readfile()的結果，但它似乎不起作用。 我的服務器模塊相當大，最好在此處省略代碼。 我真的只需要知道如何為 process 函數創建css 。

Answer 1

我想我已經解決了你的問題。

你想文件讀入一個變量，名為css ，並通過css來process() 問題在於您使用哪種方法來讀取文件內容。

目前，您使用的是異步的fs.readFile 。 您正在使用它，就好像它是同步的一樣。 因此，您有兩個選擇：

以fs.readFile的方式使用fs.readFile ，又名：異步：

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

function processCSS(file, cb){

  fs.readFile(file, {encoding: String}, function (err, css) { 
      if (err) throw err;
      postcss([ autoprefixer ]).process(css).then(function (result) {
          result.warnings().forEach(function (warn) {
              console.warn(warn.toString());
          });
          console.log(result.css);
          cb( result.css );
      });
  });

}

如果您決定使用它，那么了解promises可能是一個好主意，它可以清理異步代碼。

或者代替fs.readFile ，您可以使用fs.readFileSync同步讀取文件。 根據您的文件有多大，這不是最好的主意。

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

function processCSS(file, cb){

  var css = fs.readFileSync(file, {encoding: String});
  postcss([ autoprefixer ]).process(css).then(function (result) {
      result.warnings().forEach(function (warn) {
          console.warn(warn.toString());
      });
      console.log(result.css);
      cb( result.css );
  });

}

希望這可以幫助！

Answer 2

答案是：css是fs.readFile()的結果。

我犯了一個愚蠢的錯誤。 我嘗試使用他們在文檔中顯示的函數，並在postcss()函數（異步）完成之前將其結果返回給文件服務器處理。