Question

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

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

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

Answer 1

autoprefixer是一个postcss插件。这意味着您必须将其与postcss一起使用。

postcss JavaScript API通过创建使用指定插件的处理器来工作。然后将CSS字符串传递给.process()。这将返回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

将autoprefixer与字符串或流一起使用

1 个答案: