如何将 PostCSS 集成到 Broccoli angular-cli Build 中？

Question

似乎此构建脚本是运行ning，但输出的 CSS 未缩小或自动添加前缀。我正在尝试使用 Broccoli 和 angular-cli 编译 SASS，然后运行通过 Post CSS 的输出。我想也许一些 ember-cli 的人也可以提供帮助。我做错了什么？

构建在终端中输出：

Slowest Trees                                 | Total               
----------------------------------------------+---------------------
BroccoliTypeScriptCompiler                    | 1274ms              
vendor                                        | 502ms               
PostcssFilter | 465ms

但是 CSS 与从 SASS 输出的一样，而不是 Post CSS.

这是我的 angular-cli-build.js:

'use strict';
/* global require, module */


const Angular2App = require('angular-cli/lib/broccoli/angular2-app');
const compileSass = require('broccoli-sass');
const compileCSS = require('broccoli-postcss');
const cssnext = require('postcss-cssnext');
const cssnano = require('cssnano');
const mergeTrees = require('broccoli-merge-trees');
const Funnel = require('broccoli-funnel');
const _ = require('lodash');
const glob = require('glob');


var options =  {
  plugins: [
    {
      module: cssnext,
      options: {
          browsers: ['> 1%'],
          warnForDuplicates: false
      }
    },
    {
      module: cssnano,
      options: {
          safe: true,
          sourcemap: true
      }
    }
  ]
};


module.exports = function(defaults) {

  let sourceDir = 'src';
  let appTree = new Angular2App(defaults, {
      sourceDir: sourceDir,
      sassCompiler: {
        includePaths: [
          'src/style'
        ]
      },
      vendorNpmFiles: [
        'systemjs/dist/system-polyfills.js',
        'systemjs/dist/system.src.js',
        'zone.js/dist/*.js',
        'es6-shim/es6-shim.js',
        'reflect-metadata/*.js',
        'reflect-metadata/*.js.map',
        'rxjs/**/*.js',
        '@angular/**/*.js',
        'rxjs/**/*.js.map',
        '@angular/**/*.js.map',
        'd3/d3.js',
        'three/build/three.js',
        'three/examples/js/postprocessing/*.js',
        'three/examples/js/shaders/*.js'
      ]
    });


    let sass = mergeTrees(_.map(glob.sync('src/**/*.scss'), function(sassFile) {
        sassFile = sassFile.replace('src/', '');
        return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css'));
    }));

    let css = compileCSS(sass, options);

    return mergeTrees([sass, css, appTree], { overwrite: true });
};

Answer 1

这是操作顺序，我的树没有覆盖 appTree！

这行得通！ return mergeTrees([appTree, sass, css], { overwrite: true });

如何将 PostCSS 集成到 Broccoli angular-cli Build 中？

How do I integrate PostCSS into Broccoli angular-cli Build?

broccolijs

postcss

angular-cli