CODEWITHSUNDEEP
ember.jssassember-cli
Koala7
Koala7

Reputation: 1404

Ember-Cli SASS Settings

I am using ember-cli-sass instead of broccoli-ruby-sass

These are the steps i have done

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

bower install --save foundation

I am getting this error in the console after i started the ember server

enter image description here

I don't understand why it says "File not found: /app/styles/app.scss"

i don't have any app.scss a part from

enter image description here

I am missing something in the configuration, what's the problem exactly?

I am using three sass file

_global.sass
_music.sass
_player.sass

i import them in app.sass

@import global
@import player
@import music

i was reading the https://www.npmjs.com/package/ember-cli-sass and it says

Specify some include paths in config/environment.js:

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

I am bit confused about these settings, i need some advices

Upvotes: 1

Views: 6208

Answers (2)

user4768441
user4768441

Reputation: 1

I think ember-cli-sass by default looks for sass files with extension .scss. If you are using file extension of .sass, you need to specify it in sassOptions.

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

Check https://github.com/aexmachina/ember-cli-sass

Upvotes: 0

kiwiupover
kiwiupover

Reputation: 1780

I think you are getting the error because you may not have changed the name of your app.css file to app.scss

You your app/styles folder you should have a file called app.scss in that file I would put your imports 

// app.scss
   @import 'foundation';
   @import 'global';
   @import 'player';
   @import 'music';

Then you need to add:

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

To your config/environment.js like this:

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'test-sass',
    environment: environment,
    baseURL: '/',
    locationType: 'auto',
    sassOptions: {
      includePaths: [
        'bower_components/foundation/scss'
      ]
    },
    EmberENV: {
      FEATURES: {
   .....

If you are looking to use foundation in your ember-cli app use the ember-cli addon: https://www.npmjs.com/package/ember-cli-foundation-sass

Upvotes: 5

Related Questions