8

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!!

Mega Mydear
  • 81
  • 1
  • 2

1 Answers1

18

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.

siwalikm
  • 1,792
  • 2
  • 16
  • 20
Mitch
  • 1,535
  • 13
  • 21
  • Thanks for your suggestions. Will try this and let you know if this works. Also I am using ember-component-css for styling modularity. Currently the system works absolutely fine for sass files with combination of ember-cli-sass and ember-component-css. So can use the two plugins with both sass and scss with the changes you have suggested? – Mega Mydear Dec 15 '16 at 03:03
  • I've not used ember-component-css, but it looks like it uses https://github.com/postcss/postcss-scss rather than broccoli-sass, so the same config will not work. You might just have a better time converting all of your SASS code to the same format (probably *.scss) with sass-convert see: http://sass-lang.com/documentation. – Mitch Dec 29 '16 at 01:15