• Stars
    star
    276
  • Rank 149,319 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Use node-sass to preprocess your ember-cli app's files, with support for sourceMaps and include paths

ember-cli-sass

npm version Tests Ember Observer Score Dependency Status

ember-cli-sass uses Sass to preprocess your ember-cli app's styles, and provides support for source maps and include paths. It provides support for the common use case for Ember.js projects:

  • Source maps by default in development
  • Support for outputPaths configuration
  • Provides the ability to specify include paths
  • Edit SASS in Chrome Dev Tools

Installation

ember install ember-cli-sass

Addon Development

If you want to use ember-cli-sass in an addon and you want to distribute the compiled CSS it must be installed as a dependency so that addon/styles/addon.scss is compiled into dist/assets/vendor.css. This can be done using:

npm install --save ember-cli-sass sass

Using a different Sass implementation

By default this addon uses a distribution of Dart Sass that is compiled to pure JavaScript. Dart Sass is the reference implementation for Sass, but it does provides significantly slower compilation times than LibSass (via node-sass).

If you would like to use an alternative implementation (e.g. node-sass), you must pass a Sass implementation to the sassOptions config property in ember-cli-build.js (or in Brocfile.js if you are using an Ember CLI version older than 1.13):

var nodeSass = require("node-sass");

var app = new EmberApp({
  sassOptions: {
    implementation: nodeSass,
  },
});

By default this addon will compile app/styles/app.scss into dist/assets/app.css and produce a source map for your delectation.

If you want more control, you can pass additional options to sassOptions:

  • includePaths: an array of include paths
  • onlyIncluded: true/false whether to use only what is in app/styles and includePaths. This may helps with performance, particularly when using NPM linked modules
  • sourceMap: controls whether to generate sourceMaps, defaults to true in development. The sourceMap file will be saved to options.outputFile + '.map'
  • extension: specifies the file extension for the input files, defaults to scss. Set to sass if you want to use .sass instead.
  • passthrough: an optional hash of broccoli-funnel configuration for files from the styles tree to be passed through to dist
  • See broccoli-sass-source-maps for a list of other supported options.

Processing multiple files

If you need to process multiple files, it can be done by configuring the output paths in your ember-cli-build.js:

var app = new EmberApp({
  outputPaths: {
    app: {
      css: {
        app: "/assets/application-name.css",
        "themes/alpha": "/assets/themes/alpha.css",
      },
    },
  },
});

Source Maps

Source maps work for reading with no configuration, but to edit the SASS in the Dev Tools you need to configure your Workspace:

  1. Open app.scss in Dev Tools (you can use ⌘P and search for "app.scss")
  2. Right click in the Sources panel on the right of the Sources tab and select Add Folder to Workspace
  3. Select the root directory of your project
  4. Right click on app.scss and select Map to File System Resource...
  5. Select app.scss from your project directory

Example

Install some SASS:

npm install --save foundation

Specify some include paths in your ember-cli-build.js:

var app = new EmberApp({
  sassOptions: {
    includePaths: ["node_modules/foundation/scss"],
  },
});

Import some deps into your app.scss:

@import "foundation"; /* import everything */
/* or just import the bits you need: @import 'foundation/functions'; */

Addon Usage

To compile SASS within an ember-cli addon, there are a few additional steps:

  1. Include your styles in addon/styles/addon.scss.

  2. Ensure you've installed ember-cli-sass and either sass or node-sass under dependencies in your package.json.

  3. Define an included function in your app:

    // in your index.js
    module.exports = {
      name: "my-addon",
      included: function (/* app */) {
        this._super.included.apply(this, arguments);
      },
    };

    If you omit this step, it will throw the following error:

    Cannot read property 'sassOptions' of undefined
    TypeError: Cannot read property 'sassOptions' of undefined
    at Class.module.exports.sassOptions (~/my-plugin/node_modules/ember-cli-sass/index.js:43:48)
    
  4. Make sure your dummy app contains an app.scss

  5. If you run ember build dist, your styles from addon/styles/addon.scss should appear correctly in dist/assets/vendor.css

Alternative Addon Usage

As an alternative to the above, some addons may choose to allow their SASS to be used in the parent app, rather than the compiled CSS. This has the advantage of easily allowing users to use and override your SASS. The steps for this setup are as follows:

  1. Instead of including your styles in addon/styles/addon.scss, place them in app/styles/your-addon-name.scss. Document that your user can now add @import 'your-addon-name'; to their app.scss file. In the lines before this import they can choose to override any variables your addon marks with default.
  2. Ensure steps 2, 3 and 4 are completed as per the standard addon usage section above.

Usage within in-repo addon and in-repo engine

To re-use SASS definitions from an in-repo-addon within an in-repo-engine, you need to add the in-repo addons' path to the includePaths. So basically if you have a directory layout like this (where common is an in-repo addon):

app
└── lib
    β”œβ”€β”€ my-in-repo-engine
    β”‚   β”œβ”€β”€ addon
    β”‚   β”‚   └── styles
    β”‚   β”‚       └── addon.scss
    β”‚   └── index.js
    └── common
        └── app
            └── styles
                └── common
                    └── vars.scss

The app/lib/my-in-repo-engine/index.js should look like this:

const EngineAddon = require('ember-engines/lib/engine-addon');

module.exports = EngineAddon.extend({

  sassOptions: {
    includePaths: ['lib/common/app/styles']
  },

  ...

};

and then you can include the definitions inside the engines SASS files via:

@import "common/vars";

Changelog

  • v9.0.0 Added support for multiple sass implementations (e.g. Dart Sass, LibSass, etc.) The default Sass implementation is Dart Sass, which is now the reference implementation of Sass. This provides significantly slower compilation times than node-sass, but you can see instructions above if you'd like to continue using node-sass.

More Repositories

1

ember-electron

⚑ Build, test, compile and package desktop apps with Ember and Electron
JavaScript
806
star
2

ember-cp-validations

Ember computed property based validations
JavaScript
443
star
3

ember-changeset

Ember.js flavored changesets, inspired by Ecto
JavaScript
431
star
4

ember-moment

JavaScript
399
star
5

ember-infinity

⚑ Simple, flexible Infinite Scroll for Ember CLI Apps.
JavaScript
377
star
6

ember-data-model-fragments

Ember Data addon to support nested JSON documents
JavaScript
371
star
7

ember-metrics

Send data to multiple analytics integrations without re-implementing new API
JavaScript
367
star
8

ember-cli-flash

Simple, highly configurable flash messages for ember-cli
JavaScript
355
star
9

ember-light-table

Lightweight, contextual component based table for Ember
JavaScript
312
star
10

ember-data-factory-guy

Factories and helper functions for (unit, integration, acceptance) testing + development scenarios with Ember Data
JavaScript
302
star
11

ember-sortable

Sortable UI primitives for Ember.js
JavaScript
295
star
12

ember-burger-menu

An off-canvas sidebar component with a collection of animations and styles using CSS transitions
JavaScript
279
star
13

ember-notify

Notification messages for your Ember.js app
JavaScript
264
star
14

ember-collection

An efficient incremental rendering component for Ember.js with support for custom layouts and large lists
JavaScript
236
star
15

ember-changeset-validations

Validations for ember-changeset
JavaScript
219
star
16

ember-file-upload

File uploads for Ember apps
TypeScript
201
star
17

emberx-select

Select component for Ember based on the native html select element.
JavaScript
200
star
18

ember-keyboard

An Ember.js addon for the painless support of keyboard events
JavaScript
177
star
19

ember-pikaday

A datepicker component for Ember CLI projects.
JavaScript
159
star
20

ember-impagination

An Ember Addon that puts the fun back in asynchronous, paginated datasets
JavaScript
122
star
21

active-model-adapter

Adapters and Serializers for Rails's ActiveModel::Serializers
TypeScript
102
star
22

ember-cli-hot-loader

An early look at what hot reloading might be like in the ember ecosystem
JavaScript
99
star
23

ember-autoresize

Autoresize for Ember Components
JavaScript
88
star
24

ember-cli-windows

🚀 Improve Ember-Cli Performance on Windows
JavaScript
79
star
25

ember-set-helper

A better `mut` helper
JavaScript
68
star
26

ember-inputmask

Ember wrapper around Inputmask.js
JavaScript
68
star
27

ember-collapsible-panel

An unopinionated, zero-dependency panel and accordion
JavaScript
57
star
28

ember-qunit-nice-errors

Because expected true, result false is not enough!
JavaScript
56
star
29

ember-cli-ifa

Ember CLI addon for injecting fingerprinted asset map file into Ember app
JavaScript
54
star
30

emberx-file-input

A tiny Ember component which does one thing and only: select files beautifully.
JavaScript
52
star
31

ember-cognito

AWS Amplify/Cognito and ember-simple-auth integration
JavaScript
32
star
32

ember-validators

A collection of EmberJS validators
JavaScript
24
star
33

ember-cli-bugsnag

Integrates Bugsnag reporting service into your Ember CLI app.
JavaScript
20
star
34

ember-stripe-elements

A simple Ember wrapper for Stripe Elements
JavaScript
18
star
35

ember-popper-modifier

An Ember modifier for working with Popper.js.
TypeScript
14
star
36

ember-launch-darkly

A modern Ember addon to wrap the Launch Darkly service
JavaScript
13
star
37

ember-require-module

Dynamically require modules
JavaScript
7
star
38

ember-indexeddb-adapter

Ember Data adapter for IndexedDB
JavaScript
4
star
39

program-guidelines

Checklist and guidelines for the Adopted Ember Addons org.
JavaScript
3
star
40

ember-cli-deploy-new-relic-sourcemap

Ember CLI Deploy plugin to deploy source maps to new relic
JavaScript
2
star