fast-sass
A SASS compiler plugin focussed on speed over customisability. Initially forked from ember-cli-sass then rewritten taking much inspiration from ember-cli-typescript to allow the addon to be written in TypeScript
fast-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:
Installation
ember install fast-sass
Next you'll need to rename styles/app.css
to styles/app.scss
.
Usage
This addon uses a distribution of Dart Sass that is compiled to pure JavaScript. Dart Sass is the reference implementation for Sass.
By default this addon will compile app/styles/app.scss
into dist/assets/app.css
.
If you want more control, you can pass additional options to sassOptions
:
includePaths
: an array of include pathsonlyIncluded
: true/false whether to use only what is inapp/styles
andincludePaths
. This may helps with performance, particularly when using NPM linked modulesext
: The file extension of the input file, default:'scss'
Example
The following example assumes your this party packages are installed as node_modules
.
Make the files from that dependence available to SASS like this:
yarn add -D foundation-sites
Specify some include paths in your ember-cli-build.js
:
var app = new EmberApp({
sassOptions: {
includePaths: [
'node_modules/foundation-sites/scss',
]
}
});
Import some deps into your app.scss:
@import 'foundation';
@include foundation-global-styles;
Automatic Pod Style Inclusions
If you want to follow a pattern of having style files for each individual component, you can have them automatically included by passing this option in ember-cli-build.js
.
var app = new EmberApp({
sassOptions: {
autoIncludeComponentCSS: true
}
});
You must also add this to your app.scss
@import 'pod-styles';
With this done, any scss
file found in app/components/**
will be automatically included in the build output.