Ember.js CSS文件未按照Ember CLI中的预期编译为app.CSS?
Ember CLI文档介绍了以下关于Ember.js CSS文件未按照Ember CLI中的预期编译为app.CSS?,ember.js,ember-cli,Ember.js,Ember Cli,Ember CLI文档介绍了以下关于/app/styles文件夹的内容: 包含样式表,无论是SASS、LESS、手写笔、指南针还是普通CSS(尽管只允许一种类型,请参见资产编译)。这些都被编译成app.css 我在/app/styles中有以下文件:app.css,one.css,two.css 我希望在启动服务器时,在文件夹/dist/assets中会有一个名为appName.css的文件,内容是所有三个文件的串联。相反,只有app.css文件的内容。因此,我通过app.css中的@impor
/app/styles
文件夹的内容:
包含样式表,无论是SASS、LESS、手写笔、指南针还是普通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数组。这是0.1.1版本的已知问题:
您可能应该等待更新
至于主要问题,请尝试。现在有此ember cli concat
附加组件可用:
看起来非常容易使用:谢谢回复。西兰花海螺做了我想要的。@stepanhav-我也有同样的问题。你能分享一下你是怎么做到的吗?谢谢你的更新,@stephanav。您是否已成功获取生成的CSS文件指纹并在index.html中使用?