Question

Ember CLI文档说明了以下/app/styles文件夹：

包含样式表，无论是SASS，LESS，Stylus，Compass还是普通CSS（尽管只允许使用一种类型，请参阅资产编译）。这些都编译成app.css。

我在/app/styles中有以下文件：app.css，one.css，two.css。

我希望在启动服务器时，在文件夹/ dist / assets中会有一个名为appName.css的文件，内容将是所有三个文件的串联。相反，只有app.css文件的内容。所以我在app.css中使用@import解决了这个问题：

@import url("one.css");
@import url("two.css");

这适用于0.0.46，虽然不是最佳的，因为对服务器提出了更多请求。现在我更新到0.1.1，文件one.css和two.css不再复制到/dist/assets文件夹。

但主要问题是：如何实现/app/styles文件夹中所有css文件的连接？我错过了一些基本的东西，或者是否需要将一些命令包含在Brocfile.js中？

更新

以下是Brocfile.js的片段，展示了我们如何连接CSS文件：

var concat = require('broccoli-concat');
var cleanCSS = require('broccoli-clean-css');

var concatenatedCss = concat('app/styles', {
    inputFiles: [
        'reset.css',
        'common.css',
        'layout.css',
        ...
    ],
    outputFile: '/assets/appName.css',
    wrapInFunction: false
});

if (app.env === 'production') {
    concatenatedCss = cleanCSS(concatenatedCss, {restructuring: false});
}

module.exports = app.toTree([concatenatedCss]);

我们手动将文件添加到inputFiles数组。

Answer 1

已知0.1.1版本的问题：Static css compiler broken (0.1.x regression)

您可能应该等待更新。

至于主要问题，请尝试broccoli-concat。

Answer 2

现在有ember-cli-concat个附加组件可用：https://github.com/sir-dunxalot/ember-cli-concat。

看起来非常好用：https://github.com/sir-dunxalot/ember-cli-concat/wiki/Installation

在Ember CLI中未按预期编译到app.css中的CSS文件？

2 个答案: