Wie integriere ich PostCSS in Broccoli eckig-cli Build?

Question

Es scheint, als ob dieses Build-Skript ausgeführt wird, aber das ausgegebene CSS wird nicht verkleinert oder automatisch vorangestellt. Ich versuche, SASS zu kompilieren, dann führe die Ausgabe durch Post CSS mit Broccoli und dem angular-cli aus. Ich nehme an, vielleicht könnten auch ein paar Leute von Ember-Cli helfen. Was mache ich falsch?

Der Build gibt diese in Terminal:

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

aber die CSS ist das gleiche wie wenn es Ausgabe von SASS war, nicht CSS veröffentlichen.

Hier ist mein Winkel-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

Es war die Reihenfolge der Operationen wurden meine Bäume überschreiben appTree nicht!

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