Addon that is a theme library exposing multiple sass styles

Ember CLI
1

We have an ember addon that is used as a theme/component library for multiple application projects. This addon imports (among others):

“ember-bootstrap”: “1.2.1”, “ember-cli-sass”: “7.2.0”, “ember-cli-sass-pods”: “1.3.0”,

To facilitate this working properly both using symlinks, and also when the project builds using the addon from the private npm library, we’ve had to basically set it up so that:

  • Our library addon has all of it’s styles in /addon/styles/{addon-name}

  • Then the implementation project sets the sass include paths as:

    sassOptions: { includePaths: [ ‘app’, ‘node_modules/{addon-name}/addon/components’, ‘node_modules/{addon-name}/addon/styles’ ] },

  • This results in us being able to use the stylesheets in the addon project by specifying:

    @import ‘{addon-name}/my-child-sass-file’;

    @import ‘{addon-name}/my-other-child-sass-file’;

Within the import we can use the {addon-name} because we use the folder structure /addon/styles/{addon-name} within the addon, basically explicitly naming this sub folder after the addon, and subsequently including up to the {addon-name} folder in the build. Otherwise, it might cause conflicts with imports from similarly named directories in the application project.

It feels messy and it would be ideal if I can say, okay this sub directory expose to implementing projects, as a sub directory of the addon name, without having to explicitly include this addon named child folder.

Any advice on how to achieve this would be appreciated.