ember.js - 如何将项目的CSS文件编译成一个文件

Question

默认情况下， ember-cli 似乎设置为不将 css 文件编译为一个文件(就像处理 JS 文件一样)。

配置 ember-cli 以合并 app/styles 中的所有文件的最佳方法是什么？ (和子目录)合并为一个 app.css文件(然后指纹等)？这可以通过 Brocfile 实现还是我需要覆盖 EmberApp.styles() ?

更新:据我所知，有以下(不是很优雅)选项:

1) 使用 SASS 和 @import将 CSS 文件单独放入 app.scss 中。这样做的缺点是我需要使用额外的插件 (SASS)，而 SASS 似乎不允许在 @import 中使用通配符模式。 (例如 @import('**/*.scss') )，这使得这个解决方案对于大型项目来说很麻烦。

2) 覆盖 EmberApp.styles()这样它就不会复制 CSS 文件(目前这是由 broccoli-static-compiler 周围的包装器完成的)并配置 Broccoli 以便将 css 文件连接到 app.css .不过，这个解决方案似乎有点笨拙，并且存在与较新版本的 ember-cli 不兼容的风险。

3) 解决方法:使用 broccoli-funnel和 broccoli-concat自己做串联。

在 Brocfile.js 中:

var appTree = app.toTree()

var concatenated = concat(appTree, {
  inputFiles: [
    '**/*.css'
  ],
  outputFile: '/assets/app.css',
});

module.exports = mergeTrees([appTree, concatenated], { overwrite: true });

这将创建一个新的 app.css在 /assets/app.css 中使用我们所有的串联 CSS .但是，这个文件没有指纹。我们的 Assets 目录现在看起来像这样:

/assets/app.css
/assets/app-<fingerprint>.css

所以 - 诚然是hacky - 第二步是1)获取指纹的文件名 app-<fingerprint>.css , 2) 删除 app-<fingerprint>.css和 3) 将 app.css 重命名为 app-<fingerprint>.css .最后一步可以使用 Grunt 或 gulp 自动化。

Answer 1

就个人而言，我认为 SCSS 将是要走的路。这是最简单的解决方案，除了将内容导入一个文件(例如，重复模式的变量)之外，使用 SCSS 还具有其他优势。

此外，手动添加文件允许开发人员准确配置每段代码的包含位置。我不认为这是一个骗局，但我可以理解另一种观点，而且我确实花了 500 万时间试图弄清楚为什么我的样式没有被应用，直到我意识到这是因为我没有包含新样式文件。

编辑:有一些可用的 node-sass globbing 解决方案，如果这是一个很大的障碍，可能会添加。