Question

我很难配置Ember CLI使用uncss。设置：

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

应用/模板/ 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();

使用https://github.com/sindresorhus/broccoli-uncss需要做什么？ http://iamstef.net/ember-cli/的资产部分说它很容易，但没有描述如何实际执行。

Answer 1

如果我错了，请纠正我......

我认为在“模板化环境”中，unss将无法正常工作！

假设你有一个外模板和一个内模板。外观看起来像

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

，内部模板看起来像

<h1>Text</h1>

在您的css文件中，您可能会写一些类似

的内容

.outer h1 { 
    background: red; 
}

据我所知，unss会拒绝这个css规则，因为uncss无法在你的任何一个模板中找到它。

Answer 2

它没有在broccoli-uncss自述文件中有详细记载，但如果你看一下 index.js和test.js，您会明白这一点。

基本上你传入树作为第一个参数，选项哈希作为第二个参数传递，而选项哈希应该有一个html选项，告诉index.html在哪里。在你的情况下，我认为奥利弗所说的是真的。您可以在dist文件夹中使用html。我不确定如何将它与ember-cli集成，但我的猜测可能是你需要一个ember-cli插件，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;

如何配置Ember CLI以使用uncss

2 个答案: