Sass dependencies in addon

[artlowel]

I have an addon that uses sass, but also needs to import a 3d party sass lib, and I can't seem to get that last part right. I want to do something similar to the foundation example in README.md, but import it in the addon instead of the app.

When I add the lib to sassOptions.includePaths and @import 'libname' in addon.scss I get the error: "file to import not found or unreadable". If I do the same thing in the host app's app.scss it compiles just fine, and that would suffice in most cases. But I want to be able to use the lib's variables and mixins in my addon's sass files, and since they get compiled to vendor.css, separate from the host app's css, those variables and mixins can't be found during compilation.

Can someone point me in the right direction?

[aexmachina]

I presume you're adding includePaths to ember-cli-build.js in the root directory of your addon?

[aexmachina]

I presume you're adding includePaths to ember-cli-build.js in the root directory of your addon?

[artlowel]

That is correct

[artlowel]

That is correct

[aexmachina]

I'd like to say that I can dive in and have a look at this, but I'd be lying - I've got my plate full with completely non-Ember things.

@dukex and @stefanpenner, any thoughts on this one? This sounds like a reasonable use case, and I think that this should just work. Maybe ember-cli isn't providing the right trees when developing an addon.

[aexmachina]

I'd like to say that I can dive in and have a look at this, but I'd be lying - I've got my plate full with completely non-Ember things.

@dukex and @stefanpenner, any thoughts on this one? This sounds like a reasonable use case, and I think that this should just work. Maybe ember-cli isn't providing the right trees when developing an addon.

[dukex]

The ember-cli use the ember-cli-build.js in addon only to build/server the dummy app.

The only way I see to make it works today is putting sassOptions config on addon/config/environment.js

ex:

'use strict';                                                                                                                                                                                                    

module.exports = function(/* environment, appConfig */) {                                                                                                                                                        
  return {                                                                                                                                                                                                       
    sassOptions: {                                                                                                                                                                                               
       includePaths: ['bower_components/material-design-lite/src']                                                                                                                                                
    }                                                                                                                                                                                                            
 };                                                                                                                                                                                                             };   

But you'll receive a deprecated note:

Deprecation warning: sassOptions should be moved to your ember-cli-build

[dukex]

The ember-cli use the ember-cli-build.js in addon only to build/server the dummy app.

The only way I see to make it works today is putting sassOptions config on addon/config/environment.js

ex:

'use strict';                                                                                                                                                                                                    

module.exports = function(/* environment, appConfig */) {                                                                                                                                                        
  return {                                                                                                                                                                                                       
    sassOptions: {                                                                                                                                                                                               
       includePaths: ['bower_components/material-design-lite/src']                                                                                                                                                
    }                                                                                                                                                                                                            
 };                                                                                                                                                                                                             };   

But you'll receive a deprecated note:

Deprecation warning: sassOptions should be moved to your ember-cli-build

[aexmachina]

If I understand correctly @artlowel is trying to get the SASS compiled into vendor.css. Would this approach achieve that goal?

I'd be happy to remove that deprecation if this is the solution for this problem. It was really just added to help people migrate away from that method (which never should have been used in the first place).

[aexmachina]

If I understand correctly @artlowel is trying to get the SASS compiled into vendor.css. Would this approach achieve that goal?

I'd be happy to remove that deprecation if this is the solution for this problem. It was really just added to help people migrate away from that method (which never should have been used in the first place).

[dukex]

@aexmachina Yes, works like expected

Just to confirm I made an example app using foundation as README.md.

The problem with addon/config/environment.js approach is when you set bower_components/material-design-lite/src you are setting a directory on the app(out of addon) so the addon developer need ensure the folder exists, unfortunately I can not use app.bowerDirectory in this point, a possible approach to avoid this problem is making an hack like that:

module.exports = function(/* environment, appConfig */) {
  var foundationPath = require('path').join(__dirname, '..', 'bower_components', 'foundation', 'scss');

  return {
    sassOptions: {
      includePaths: [ foundationPath ]
    }
  };
};

[dukex]

@aexmachina Yes, works like expected

Just to confirm I made an example app using foundation as README.md.

The problem with addon/config/environment.js approach is when you set bower_components/material-design-lite/src you are setting a directory on the app(out of addon) so the addon developer need ensure the folder exists, unfortunately I can not use app.bowerDirectory in this point, a possible approach to avoid this problem is making an hack like that:

module.exports = function(/* environment, appConfig */) {
  var foundationPath = require('path').join(__dirname, '..', 'bower_components', 'foundation', 'scss');

  return {
    sassOptions: {
      includePaths: [ foundationPath ]
    }
  };
};

[aexmachina]

Two things there: a) we want to avoid hacks - they give you headaches in the future! and b) the goal here is to compile the sass into vendor.css - so it would only happen when the addon is being built - not when the app is built. ​

[aexmachina]

Two things there: a) we want to avoid hacks - they give you headaches in the future! and b) the goal here is to compile the sass into vendor.css - so it would only happen when the addon is being built - not when the app is built. ​

[artlowel]

I can confirm that the solution proposed by @dukex works for me as well. A more robust solution would be nice, but this will do for now. Thanks for the swift replies!

[artlowel]

I can confirm that the solution proposed by @dukex works for me as well. A more robust solution would be nice, but this will do for now. Thanks for the swift replies!

[luqman]

I have the same use case, wanting to make use of bourbon.io lib in the add-on and also make it available to any consuming app. Adding it to environment.js makes it work, thanks!

Just wondering; not having such settings in environment.js is that a new convention because I can see other add-ons still use it e.g. ember-cli-htmlbars. If I understand correctly, not having it in environment.js separates from the build process?

cc @aexmachina @stefanpenner

[luqman]

I have the same use case, wanting to make use of bourbon.io lib in the add-on and also make it available to any consuming app. Adding it to environment.js makes it work, thanks!

Just wondering; not having such settings in environment.js is that a new convention because I can see other add-ons still use it e.g. ember-cli-htmlbars. If I understand correctly, not having it in environment.js separates from the build process?

cc @aexmachina @stefanpenner

[luqman]

I spotted this add-on that uses included hook to set sassOptions, it does however set ember-cli-sass as an devDependency instead, not sure how that changes things?

The same approach works in my add-on, where bourbon can be imported in the consuming app and the add-on itself but then addon.scss doesn't become part of vendor.css (consuming app).

Another test;

Keeping ember-cli-sass as regular dependency vs devDependency, If I set sassOptions in my addons included hook it doesnt work (file not found).

From what I've observed; when setupPreprocessorRegistry is invoked in ember-cli-sass, it doesn't have access to this.app so can't access sassOptions.

If I move code invoked by setupPreprocessorRegistry to included hook in ember-cli-sass

registry.add('css', new SASSPlugin(this.sassOptions.bind(this)));

imports start working again but goes back to addon.scss not being processed.

cc @aexmachina @stefanpenner

[luqman]

I spotted this add-on that uses included hook to set sassOptions, it does however set ember-cli-sass as an devDependency instead, not sure how that changes things?

The same approach works in my add-on, where bourbon can be imported in the consuming app and the add-on itself but then addon.scss doesn't become part of vendor.css (consuming app).

Another test;

Keeping ember-cli-sass as regular dependency vs devDependency, If I set sassOptions in my addons included hook it doesnt work (file not found).

From what I've observed; when setupPreprocessorRegistry is invoked in ember-cli-sass, it doesn't have access to this.app so can't access sassOptions.

If I move code invoked by setupPreprocessorRegistry to included hook in ember-cli-sass

registry.add('css', new SASSPlugin(this.sassOptions.bind(this)));

imports start working again but goes back to addon.scss not being processed.

cc @aexmachina @stefanpenner

[aexmachina]

Is this resolved by #106?

[aexmachina]

Is this resolved by #106?

[aexmachina]

Closing due to inactivity, feel free to reopen.

[aexmachina]

Closing due to inactivity, feel free to reopen.

[steffansluis]

It appears this issue is still a problem:
The Broccoli Plugin: [SassCompiler] failed with: Error: File not found: /addon.scss

package.json

dependencies: {
  ...
  ember-cli-sass: "^5.3.1",
  ...
}

ember-cli-build.js

  ...
  var app = new EmberAddon(defaults, {
    sassOptions: {
      extension: 'sass'
    },
    outputPaths: {
      app: {
        css: {
          app: null
        }
      }
    }
  });
  ...

addon/styles/addon.sass

@import "somefile"

index.js

  ...
  included: function(app) {
    this._super.included(app);
  }
  ...

[steffansluis]

It appears this issue is still a problem:
The Broccoli Plugin: [SassCompiler] failed with: Error: File not found: /addon.scss

package.json

dependencies: {
  ...
  ember-cli-sass: "^5.3.1",
  ...
}

ember-cli-build.js

  ...
  var app = new EmberAddon(defaults, {
    sassOptions: {
      extension: 'sass'
    },
    outputPaths: {
      app: {
        css: {
          app: null
        }
      }
    }
  });
  ...

addon/styles/addon.sass

@import "somefile"

index.js

  ...
  included: function(app) {
    this._super.included(app);
  }
  ...