5

默认情况下，ember-cli 似乎设置为不将 css 文件编译为一个（与 JS 文件一样）。

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

更新：据我所知，有以下（不是很优雅）选项：

1) 分别使用 SASS 和@importCSS 文件到 app.scss 中。这样做的缺点是我需要使用一个额外的插件（SASS）并且 SASS 似乎不允许在@import（例如@import('**/*.scss')）中使用通配模式，这使得这个解决方案对于大型项目来说很麻烦。

2) 覆盖，使其EmberApp.styles()不复制 CSS 文件（目前由. 不过，这个解决方案似乎有点老套，并且存在与新版本的 ember-cli 不兼容的风险。broccoli-static-compilerapp.css

3) 解决方法：使用broccoli-funnelandbroccoli-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 在.However 中创建一个新/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 自动化。

4

1 回答 1

1

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

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

编辑：有一些可用的 node-sass globbing 解决方案，如果这是一个大的节目停止者，可能会被添加。

于 2018-06-21T14:35:37.863 回答