logo标签列表

Ember-cli：如何在pods中放置CSS

ember.jssassember-clibroccolijs
7
我使用Ember-cli的Pod结构来按资源组织JS和模板，这是一个很大的改进。与资源相关逻辑的最后遗迹是CSS（SCSS）文件，它们已经沿着Pod般的线路分解，但仍然停留在app/styles中。
我的想法是将CSS文件移动到每个Pod下，名为style.css。我的问题是如何通过@import指令和/或Broccoli指示SASS查找Pods内的SCSS文件（可能有几层深度），并将它们编译成appname.css。
2个回答
3

Erik Bryn在EmberConf上宣布了他的ember-cli addon，可以实现这一点。不幸的是，它还不支持CSS预处理器，所以在他的插件进一步完善之前，您必须使用非pod方式来组织样式...

谢谢你的指针，我相信那会是一个有用的附加组件。就个人而言，我不想安装一个新的东西只是为了将文件保留在A处而不是B处，这会干扰我的CSS，使用另一种特殊的语法与“&”结合，向我的类添加奇怪的数字，神奇地改变组件展开的方式，可能与其他组件版本冲突，并且仅适用于Ember组件，还提供更多奇怪的Broccoli错误机会。在某些时候，我确实希望Ember朝着更简单的方向发展，而不是更复杂的方向。 - user663031
我知道你的意思，而且正在进行相关工作（https://github.com/ember-cli/ember-cli/pull/3402），以使将样式拆分为Pods更加轻松。 - Lauren Elizabeth Tan
很高兴地说，我成功地使用了ember-component-css（答案中的链接），无缝预处理了pod模式下组件的.less样式。这非常顺利。 - shane
1
我们创建了一个不错的插件ember-cli-sass-pods，它使用ember-cli-sass（将自动安装），并允许您生成并将样式scss文件放入您的pods目录中。
例如：
app/login
app/login/route.js
app/login/template.hbs
app/login/style.scss

或者一个组件：
app/components/login-box
app/components/login-box/component.js
app/components/login-box/template.hbs
app/components/login-box/style.scss

只需运行

ember g style [路径] -p

享受！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接