Question

我想在我的节点应用程序中使用autoprefixer来编译css。为了我的特殊需要，我想在不回调或承诺的情况下调用autoprefixer。

很简单：

var result = autoprefixer.process(css);

或

var result = myPrefixerWrap(css);

我正在与此作斗争一段时间，你能帮帮我吗。

谢谢

ps：我已经尝试过postcss-js，但它会产生一个json对象用于反应，而不是纯css。例如{borderRadius：＆＃34; 5px＆＃34;}

var prefixer    = postcssJs.sync([ autoprefixer ]);
var cssCompiled = postcss.parse(css);
var cssObject   = postcssJS.objectify(cssCompiled);
var autoResult  = prefixer(cssObject);

Answer 1

PostCSS有一个API，用于同步获取Processor#process（process().css，别名为toString()）的结果，只要所有使用的PostCSS插件都是同步的，这个结果就会起作用（像Autoprefixer）。执行此操作的代码非常简单：

var postcss = require('postcss'); // import postcss from 'posts';
var autoprefixer = require('autoprefixer'); // import autoprefixer from 'autoprefixer';
postcss([autoprefixer]).process(styleString).css;

注意：我在Webpack中使用postcss-js时遇到问题，因此对于那些看到错误的人来说是这样的：

Module parse failed: /path/to/node_modules/autoprefixer/node_modules/caniuse-db/features-json/css-regions.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.

或者：

ERROR in ./~/autoprefixer/~/browserslist/index.js
Module not found: Error: Cannot resolve module 'fs' in /path/to/node_modules/autoprefixer/node_modules/browserslist
 @ ./~/autoprefixer/~/browserslist/index.js 3:14-27

查看postcss-js GitHub自述文件的Troubleshooting section，找出需要添加到Webpack配置中的内容才能使其正常运行。

同步使用autoprefixer

1 个答案: