CSS files in Ember.js

Hello everyone. I’m new to Ember.js, how to connect CSS files to a component/route? Thanks in advance for your answer :smile:

Hi @helldoodle, welcome to Ember! The most straightforward way is just placing your CSS in app/styles.css or a file imported into that one. You can add class names to component or route template elements just like you would in HTML and add styles to those classes in your CSS. Don’t sleep on this page in the guides.

If you want to get fancier you can use a variety of CSS pre/post-processors like LESS/SASS/PostCSS etc by installing and configuring a popular addon.

If you want to write CSS that is matched more closely to your routes/components and co-located in the filesystem I’d recommend checking out the ember-css-modules addon

Thank you! Surprisingly, the Ember community is very cool! :smiley:

Anytime! IMHO I think the community is one of Ember’s biggest strengths. Definitely feel free to ask here or in the discord channels if you get stuck on anything.