ember-cli-sass
A Sass preprocessor for Ember CLI apps with source maps and include path support.
What is ember-cli-sass?
ember-cli-sass is an Ember CLI addon that provides Sass preprocessing capabilities for Ember.js applications. It compiles Sass/SCSS files into CSS during the build process, with built-in support for source maps and custom include paths. The addon integrates directly with Ember CLI's build system, making it easy to use Sass in Ember projects.
Ember.js developers who want to use Sass or SCSS for styling their applications, particularly those working on Ember CLI projects who need seamless integration with the existing build pipeline.
Developers choose ember-cli-sass because it provides a well-maintained, official-feeling Sass integration for Ember CLI with sensible defaults, source map support, and flexibility to choose between different Sass implementations (Dart Sass or node-sass).
Overview
Use node-sass to preprocess your ember-cli app's files, with support for sourceMaps and include paths
Use Cases
Best For
- Adding Sass preprocessing to existing Ember CLI applications
- Ember addons that need to distribute Sass stylesheets
- Ember projects requiring source maps for CSS debugging
- Importing Sass libraries from node_modules
- Building Ember applications with multiple theme files
- In-repo addons and engines that share Sass variables and mixins
Not Ideal For
- Non-Ember.js projects requiring Sass preprocessing, as it's tightly coupled with Ember CLI's build system
- Teams prioritizing fast build times who cannot tolerate Dart Sass's slower compilation compared to node-sass
- Applications using CSS-in-JS libraries or CSS modules for component-scoped styling, since it focuses on global Sass files
- Developers seeking drop-in, pre-styled UI components without custom Sass setup, as it only provides preprocessing
Pros & Cons
Pros
Integrates directly into Ember CLI's build pipeline with sensible defaults, making Sass preprocessing feel native to the Ember development workflow without disrupting existing tools.
Generates source maps by default in development, allowing easier debugging of Sass code directly in browser dev tools, as highlighted in the README's setup instructions.
Supports both Dart Sass and node-sass via configuration, giving developers choice between the reference implementation and faster compilation times, as noted in the version updates.
Provides specific workflows for Ember addons to distribute Sass or CSS, and allows processing multiple Sass files into separate outputs through outputPaths configuration for themes or modular styles.
Cons
Uses Dart Sass by default, which the README admits is significantly slower than node-sass, potentially increasing build times for large projects and requiring manual switching for optimization.
Requires additional steps like defining an included function in addon index.js, and errors can occur if omitted, adding friction for developers creating reusable components.
Exclusively designed for Ember CLI, making it unsuitable for projects using other frameworks or build tools, which restricts its utility in polyglot environments.
Frequently Asked Questions
Related Projects
css-blocksHigh performance, maintainable stylesheets.
ember-cli-eyeglassNPM Modules for Sass
ember-component-cssAn Ember CLI addon which allows you to specify styles for individual components
ember-css-modulesCSS Modules for ambitious applications
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.