3

I just want to ask what is the best approach to integrate sass/scss on ember project?

Currently my project is in pod structure and I just import style.scss on main app.scss under styles folder. Is it fine or there is a better approach?

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

Then in app.scss styles imported look like this

@import "./app/pods/home/style.scss";
rinold simon
  • 2,782
  • 4
  • 20
  • 39
chaelgutierrez
  • 73
  • 6
  • Hey, Chael. Are you working on a fresh project - or an older project? – sheriffderek Apr 11 '19 at 02:04
  • @sheriffderek actually on fresh project, but still I want to know how too on older project – chaelgutierrez Apr 11 '19 at 02:31
  • 1
    Well, given that it's a new project - you may want to double check if pods is a good idea. There has been this rumored 'module unification' that might happen in the future - that was meant to replace the ideas behind 'pods' - and I'm not sure if using pods is recommended anymore. Maybe ask in the ember discord channel or something. I did see some addons when I searched 'pods and sass' – sheriffderek Apr 11 '19 at 15:55
  • @sheriffderek Thanks, I'll check that. – chaelgutierrez Apr 17 '19 at 05:37

3 Answers3

2

I haven't used pods in years - because (like expecting controllers to be removed) - I was told that there was going to be a new file layout system. Since hearing that / I've heard bits and pieces of conversation that lead me to believe that pods aren't really a go-to for new projects.

That being said, I share your desire to have a nice file structure. I'd love to 'drag' a folder from one project to another / and just have all the parts of the component copy over.

Since we have the app.scss - (you said you're using sass) - / that kinda acts as the index.

I include resets and mixins and a bunch of stuff for setup. - so, that's not really podish... and maybe there are 'page' level kinda layout... which doesn't really fit either... - so, what it comes down to is really 'components', right?

ember-component-css is pretty cool - but it also has some opinions that could clash.

There's this - https://github.com/justtal/ember-cli-sass-pods - but it's 4 years old / (but so are pods) - so, it might still work great.

Because there isn't a really clear path here... I just create a component folder in styles/components/component-name.styl - and then in my styles/components.styl I @import 'component-name.styl - and then in my app.styl I import the components...

In my case / I actually like to use the cascade - and I need the files to all to be combined - in order. I can't have some of it in the vendor file.

It's not ideal (just because I have to create each file explicitly and register it) - but I can't afford to just keep wishing there was a better file layout.

Instead of fuzzy searching component-name > template

I just search template > component-name

¯\_(ツ)_/¯

I wonder which style will cause me less pain in future transitions. They'll offer codemods to help / but they can't account for unique configurations.

I'd suggest asking this in the official discuss forum. You'll get the real answers there. : )

https://discuss.emberjs.com/

sheriffderek
  • 8,848
  • 6
  • 43
  • 70
  • 1
    There was a recent update on the status of module unification which is the new file system layout you are talking about: https://blog.emberjs.com/2019/03/11/update-on-module-unification-and-octane.html – jelhan Apr 12 '19 at 08:52
0

  1. app/styles directory, is the home for stylesheets like CSS, SASS, or LESS.

  2. Folders like vendor and public that can also hold many other files of the developer's choice.

  3. So in your case if you wish to have separate scss file for each pod,

    • you can put it in the place as you mentioned. (else)
    • have it under app/styles/pod1.scss and import it under .ember-cli-build.js -> app.import('app/styles/pod1.scss')

[References]

You can get the detailed view of Project layouts, Stylesheet compilation, Assets and dependencies below

  1. Project layouts
  2. Stylesheet compilation
  3. Assets and dependencies
rinold simon
  • 2,782
  • 4
  • 20
  • 39
0

Besides ember-component-css there is ember-css-modules. Both addons try to achieve about the same goal, however I really prefer ember-css-modules.

That addon has an addon called ember-css-modules-sass. Both together will easily allow you to write one sass file per component.

You just place a styles.scss file in your component pod (app/components/my-component/styles.scss and then use local-class="my-class" instead of class="my-class" in your template.

Your classes in your scss will be automatically namespaces.

Lux
  • 17,835
  • 5
  • 43
  • 73