如何将项目的CSS文件编译成一个文件

Question

默认情况下,ember-cli似乎设置为不将css文件编译成一个(与JS文件一样).

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

---

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

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

2)覆盖EmberApp.styles()使得它不复制CSS文件(这当前由包装器完成broccoli-static-compiler)并配置Broccoli以便将css文件连接到app.css.这个解决方案虽然看起来有点hacky,但是存在与较新版本的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带有我们所有连接CSS 的新内容./assets/app.css但是,这个文件没有指纹识别.我们的资产目录现在看起来像这样:

/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 还有其他优点。

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

编辑：有一些可用的 Node-sass 通配解决方案，如果这是一个大问题的话，可能可以添加它们。