8

我很难将 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/的资产部分说这很容易，但没有描述如何实际做到这一点。

4

2 回答 2

1

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

我认为 uncss 在“模板环境”中不会按预期工作！

假设您有一个外部模板和一个内部模板。外表看起来像

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

内部模板看起来像

<h1>Text</h1>

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

.outer h1 { 
    background: red; 
}

据我所知，uncss 会忽略此 css 规则，因为 uncss 无法在您的任一模板中找到它。

于 2014-07-17T13:41:09.883 回答
1

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;
于 2014-07-19T00:46:03.930 回答