How to use SASS and SCSS in my Ember Project

Question

We are migrating our existing legacy project to Ember and Our project has both SASS and SCSS files. I am using ember-cli-sass to process SASS files by including an option "extension: 'sass'". It is working absolutely fine.But How can I configure this plugin to use both .sass and .scss files. Please help!!

Answer 1

Go ahead and install ember-cli-sass package.

$ ember install ember-cli-sass

In ember-cli-build.js file:

// ember-cli-build.js
var app = new EmberApp(defaults, {
  sassOptions: {
    extension: 'sass'
  }
});

or

// ember-cli-build.js
  let app = new EmberApp(defaults, {
    sassOptions: {
      extension: 'scss'
    }
  });

By default, based on your configuration above, this addon will compile app/styles/app.scss or your app/styles/app.sass file into dist/assets/app.css and produce a source map for your delectation.