对字符串或流使用自动前缀

Question

我使用 babel 插件通过 Angular2 将 sass 导入转换为字符串，以便在 gulp 构建期间将样式直接内联到组件代码中。我还需要使用 autoprefixer，但我无法找到有效的解决方案，基本上，这是将 sass 呈现为 css:

的代码部分

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

我试图找到使用字符串的 autoprefixer 插件，并尝试将 renderSync 的结果转换为流并使用流插件，但没有成功。我不想使用将 css 写入临时文件并从那里自动添加前缀的解决方法，所以也许有一些我可能会错过的解决方案？

Answer 1

autoprefixer is a postcss 插件。这意味着您必须将它与 postcss.

一起使用

postcss JavaScript API works by creating a processor that uses the specified plugins. You then pass the CSS string to .process(). This returns a Promise 使您可以访问结果 CSS。

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

对字符串或流使用自动前缀

Use autoprefixer with strings or streams

javascript

css

sass

gulp

autoprefixer