Question

我只想问一下将sass/scss整合到余烬项目的最佳方法是什么？

当前，我的项目处于pod结构中，我只是在样式文件夹下的主style.scss上导入app.scss。很好还是有更好的方法？

--- app
---- pods
------- home
---------- template.hbs
---------- controller.js
---------- style.scss
---- styles
------- app.scss

然后以app.scss样式导入

@import "./app/pods/home/style.scss";

Answer 1

我已经好几年没有使用Pod了-因为（就像希望删除控制器一样）-我被告知将会有一个新的文件布局系统。自从听说过/我听过一些零散的对话后，就使我相信 pods 并不是新项目的真正去处。

话虽这么说，我也希望拥有一个不错的文件结构。我很乐意将文件夹从一个项目“拖动”到另一个项目，而只需将组件的所有部分复制过来。

由于我们有app.scss-（您说过您正在使用sass）-/有点儿充当索引。

我包括重置和混合，以及一堆用于设置的东西。 -所以，这并不是真的很陈腐...也许还有“页面”级别的布局...也不太适合...-所以，归结为真正的“组件”，对吧？< / p>
ember-component-css非常酷-但它也有可能引起冲突的观点。

这里有https://github.com/justtal/ember-cli-sass-pods-已有4年历史了（但吊舱也是如此）-因此，它可能仍能很好地工作。

因为这里没有真正明确的路径...我只是在styles/components/component-name.styl中创建一个组件文件夹，然后在styles/components.styl中创建@import 'component-name.styl，然后在{ {1}}我导入了组件...

在我的情况下，我实际上喜欢使用级联-我需要将所有文件按顺序组合在一起。我无法在供应商文件中找到其中的一部分。

这并不理想（只是因为我必须显式地创建每个文件并注册它）-但我不能一直希望拥有更好的文件布局。

代替模糊搜索app.styl

我只是搜索component-name > template

template > component-name

我想知道哪种风格在以后的过渡中不会给我带来多少痛苦。他们将提供codemod来帮助/，但他们无法说明唯一的配置。

我建议在官方讨论区中提问。您将在那里得到真正的答案。：）

https://discuss.emberjs.com/

Answer 2

app/styles目录是CSS，SASS或LESS等样式表的主页。
像vendor和public这样的文件夹也可以容纳developer's choice的许多其他文件。
因此，如果您希望每个scss都有单独的pod文件，
- 您可以将其放在您提到的位置。 （其他）
- 将其放在app/styles/pod1.scss下，然后将其导入.ember-cli-build.js-> app.import('app/styles/pod1.scss')

[参考文献]

您可以在下面获得项目布局，样式表编译，资产和依赖项的详细视图

Answer 3

在ember-component-css旁有ember-css-modules。这两个插件都试图实现大约相同的目标，但是我真的更喜欢ember-css-modules。

该插件具有一个名为ember-css-modules-sass的插件。两者都可以轻松地使您为每个组件编写一个sass文件。

您只需将styles.scss文件放在组件窗格（app/components/my-component/styles.scss中，然后在模板中使用local-class="my-class"而不是class="my-class"。

您在scss中的类将自动成为名称空间。

在Ember项目中将SASS / SCSS与POD结构集成

3 个答案: