ecr

ember-cli-ruby-sass

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

Showing:

Popularity

Downloads/wk

1

GitHub Stars

0

Maintenance

Last Commit

6yrs ago

Contributors

6

Package

Dependencies

4

Size (min+gzip)

48.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ember-cli-sass

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

Installation

npm install --save-dev ember-cli-sass

Usage

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

Or, if you want more control then you can specify options using the sassOptions config property in config/environment.js:

ENV.sassOptions =  {...}
  • .includePaths: an array of include paths
  • .sourceMap: controls whether to generate sourceMaps, defaults to true in development. The sourceMap file will be saved to options.outputFile + '.map'
  • .ext: the extension to look for, defaults to scss
  • See broccoli-sass 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 Brocfile.js:

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

Upgrading from a previous version

In previous versions the sassOptions config property could be added to the EmberApp constructor in Brocfile.js, although this is still supported it is recommended to use the above usage.

If you were using the .inputFile and .outputFile options, this is now done by configuring the output paths in your Brocfile.js

Example

The following example assumes your bower packages are installed into bower_components/.

Install some SASS:

bower install --save foundation

Specify some include paths in config/environment.js:


ENV.sassOptions = {
  includePaths: [
    'bower_components/foundation/scss'
  ]
}

Import some deps into your app.scss:

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

Source Maps

Be aware that there are some issues with source maps in broccoli-sass. The source maps it generates will at least show you the source file names and line number in your dev tools. When we've got a better solution in broccoli-sass you'll be able to click through to view and update the SASS files in the dev tools \o/.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100