I am currently learning Ember by working on a project, and I’ve been searching for best practices on organizing component-related files (template, controller, and styles) in a way that keeps them co-located. Specifically, I’m unsure whether it’s better to include individual style files within the component folder or to place all .css
files in the central styles
folder.
For example, here’s the structure I’m following:
components/test-component/test-component.hbs
components/test-component/test-component.js
components/test-component/test-component.css
However, this setup leads to the following error:
localhost/:1 Refused to apply style from ‘http://localhost:4200/app/components/downloadable-files.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I’m not using SCSS; I want to use plain CSS in my project. Currently, the only solution that works is placing all styles in app.css
, but I know that isn’t considered a good practice.
I’ve come across various, often inconsistent answers online, and the guidance seems to vary depending on the Ember version and Ember-CLI setup. Could you share the architecture you follow for styling components and what you consider best practices for managing styles in Ember?