Cách cấu hình Ember CLI để sử dụng uncss

Question

Tôi gặp khó khăn trong việc cấu hình Ember CLI để sử dụng uncs. Các thiết lập:

> 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(); 

gì làm tôi phải làm gì để sử dụng https://github.com/sindresorhus/broccoli-uncss? Phần tài sản của http://iamstef.net/ember-cli/ nói rằng nó dễ dàng nhưng nó không mô tả làm thế nào để thực sự làm điều đó.

Answer 1

Tài liệu này không được viết rõ trong tài liệu đọc hoa cải xanh, nhưng nếu bạn nhìn vào index.js và test.js, bạn sẽ có ý tưởng.

Về cơ bản, bạn chuyển vào một cây làm thông số đầu tiên và băm tùy chọn làm thông số thứ hai, Và tùy chọn băm sẽ có tùy chọn html, cho biết index.html ở đâu. Trong trường hợp của bạn, tôi nghĩ những gì Oliver nói là đúng. Bạn có thể sử dụng html trong thư mục dist của bạn. Tôi không chắc chắn làm thế nào để tích hợp với các ember-cli, nhưng tôi đoán có lẽ bạn cần một add-on 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; 

Answer 2

Hãy sửa tôi nếu tôi sai ...

Tôi cho rằng uncs sẽ không hoạt động như mong đợi trong "môi trường tạo khuôn mẫu"!

Giả sử bạn có mẫu bên ngoài và bên trong. Bên ngoài trông giống như

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

và mẫu nội sẽ trông như thế

<h1>Text</h1> 

Trong file css của bạn, bạn có lẽ sẽ viết một cái gì đó giống như

.outer h1 { 
    background: red; 
} 

Theo như tôi biết uncss sẽ sa thải quy tắc css này vì uncs không thể tìm thấy nó trong một trong các mẫu của bạn.