So konfigurieren Sie Ember CLI für die Verwendung von uncss

Question

Ich habe eine harte Zeit, Ember CLI zu konfigurieren, um uncss zu verwenden. Das Setup:

> ember new foobar 
> cd foobar 
> bower install --save-dev bootstrap 
> ember generate route index 

app/templates/index.hbs

<h1>Hello World!</h1> 

Brocfile.js

/* global require, module */ 

var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 

var app = new EmberApp(); 

app.import('vendor/bootstrap/dist/css/bootstrap.css'); 

module.exports = app.toTree(); 

Was muss ich https://github.com/sindresorhus/broccoli-uncss verwenden zu tun? Der Vermögensteil von http://iamstef.net/ember-cli/ sagt, dass es einfach ist, aber es beschreibt nicht, wie man es tatsächlich macht.

Answer 1

Es ist nicht gut dokumentiert in Brokkoli-uncss Readme, aber wenn Sie sich die und test.js betrachten, würden Sie die Idee bekommen.

Grundsätzlich übergeben Sie als ersten Parameter einen Baum und einen Options-Hash als zweiten Parameter, und Optionen-Hash sollte eine HTML-Option haben, die angibt, wo sich index.html befindet. In deinem Fall denke ich, was Oliver gesagt hat, ist wahr. Sie könnten den HTML-Code in Ihrem Dist-Ordner verwenden. Ich bin nicht sicher, wie man das mit dem ember-cli integriert, aber meine Vermutung ist wahrscheinlich, dass Sie ein ember-cli Add-On benötigen, http://reefpoints.dockyard.com/2014/06/24/introducing_ember_cli_addons.html.

var uncss = require('broccoli-uncss'); 

var cssTree = uncss('dist`, { 
// html file to uncss, or this could be a live link to the html 
html: ['dist/index.html'] 
}); 

// you might somewhat merge this with ember-cli app tree here. 

module.exports = cssTree; 

Answer 2

Bitte korrigieren Sie mich, wenn ich falsch ...

Ich gehe davon aus uncss wird nicht wie in einer „Templat-Umgebung“ erwartet funktionieren!

Nehmen wir an, Sie haben eine äußere und eine innere Vorlage. Die äußere sieht aus wie

<div class="outer"> 
    {{outlet}} 
</div> 

und die innere Vorlage wie

<h1>Text</h1> 

in Ihrem CSS-Datei aussehen würde Sie würde vielleicht so etwas wie

.outer h1 { 
    background: red; 
} 

Was

schreiben, wie ich weiß, uncss würde entlassen Diese css-Regel, weil uncss sie nicht in einer Ihrer Vorlagen finden kann.