3

我只想问sass/scss在 ember 项目中集成的最佳方法是什么？

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

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

然后在app.scss导入的样式中看起来像这样

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

3 回答 3

2

我已经好几年没用过 Pod 了——因为（就像期待控制器被移除）——我被告知会有一个新的文件布局系统。自从听到这个/我听到了一些零碎的对话，让我相信Pod并不是新项目的真正选择。

话虽如此，我和你一样渴望拥有一个好的文件结构。我很想将一个文件夹从一个项目“拖”到另一个 / 并且只复制组件的所有部分。

因为我们有 app.scss - （你说你正在使用 sass） - / 它有点充当索引。

我包括重置和混合以及一堆用于设置的东西。- 所以，这不是很时髦......也许有“页面”级别的布局......这也不太适合...... - 所以，归根结底是真正的“组件”，对吧？

ember-component-css非常酷 - 但它也有一些可能会发生冲突的意见。

有这个 - https://github.com/justtal/ember-cli-sass-pods - 但它已经 4 岁了/（但豆荚也是如此） - 所以，它可能仍然很好用。

因为这里没有一个真正清晰的路径......我只是在styles/components/component-name.styl- 然后在我的styles/components.stylI @import 'component-name.styl- 然后在我app.styl的 I 中创建一个组件文件夹......

就我而言/我实际上喜欢使用级联 - 我需要按顺序组合所有文件。我不能在供应商文件中包含其中的一些。

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

而不是模糊搜索component-name > template

我只是搜索template > component-name

¯\_(ツ)_/¯

我想知道哪种风格会在未来的过渡中减少我的痛苦。他们将提供 codemods 来帮助/但他们无法解释独特的配置。

我建议在官方讨论论坛中提出这个问题。你会在那里得到真正的答案。:)

https://discuss.emberjs.com/

于 2019-04-11T16:20:09.390 回答
0

  1. app/styles目录，是 CSS、SASS 或 LESS 等样式表的主目录。

  2. vendor和之类的文件夹public也可以保存许多其他的developer's choice.

  3. 因此，在您的情况下，如果您希望scss每个文件都有单独的文件pod，

    • 你可以把它放在你提到的地方。（别的）
    • 把它放在下面并在->下app/styles/pod1.scss导入它.ember-cli-build.jsapp.import('app/styles/pod1.scss')

[参考]

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

  1. 项目布局
  2. 样式表编译
  3. 资产和依赖项
于 2019-04-11T08:15:46.917 回答
0

除此之外ember-component-css还有ember-css-modules. 两个插件都试图实现相同的目标，但我真的更喜欢ember-css-modules.

该插件有一个名为ember-css-modules-sass. 两者一起将很容易让您为每个组件编写一个 sass 文件。

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

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

于 2019-04-12T09:46:02.300 回答