Awesome

ember-css-modules-sass

This ember-css-modules plugin automatically configures ECM to handle SCSS syntax and work collaboratively with ember-cli-sass.

Installation

This addon will typically be used alongside both ember-css-modules and ember-cli-sass.

ember install ember-css-modules ember-cli-sass ember-css-modules-sass

Usage

Just the same as with vanilla ember-css-modules, but using .scss files for your modules, e.g.

{{! app/components/my-component/template.hbs }}

<div local-class="cool">😎</div>

// app/components/my-component/styles.scss

@mixin blowinUp($factor) {
  font-size: $factor;
}

.cool {
  @include blowinUp(200%);
}

Configuration

This plugin will configure ember-css-modules so that classes in all .scss files in your project will be namespaced. If you need finer-grained control over the treatment of specific aspects of the interplay between CSS Modules and Sass, see the ember-css-modules preprocessors guide.

Usage with Embroider

For applications, the relative output path from one CSS processor is in a different location with Embroider than with a regular Ember CLI build. If ember-css-modules-sass detects that you're running in an application with @embroider/compat installed, it will attempt to adjust its intermediateOutputPath setting accordingly.