How do you package assets for angularjs resusable components?

Question

I'm currently working on an angularjs project and trying to build reuseable components - heavily inspired by this article (which also spawned the angular component spec).

I'm wondering how I should go about packaging images/stylesheets that I want to include in the components?

Some things I want:

• Sass styles
• A place to store images inside the component directory, and a way to reference them in stylesheets
• Override-able styles in application using components

---

Currently my thinking is:

Create the component in my bower components directory (app/public/components), so I have

app
  |-- public
    |-- components
      |-- prefix-component-name
        |-- assets
          |-- img
            |-- ...
        |-- views
          |-- templates
          |-- sass
            |-- styles.scss   <-- Component styles
    |-- img
    |-- css
    |-- js
    index.html
  |-- views
    |-- sass
      |-- application.scss      <-- Application styles

The application.scss would import the styles of the components with something like

@import "../../public/components/prefix-component-name/views/sass/styles";

Things I'm not sure about:

• How should I reference images - what if the path changes for the application developer? Create a sass variable for that path in the component?
• How would I override variables in sass files in the application? Do I want the application developer to do that? It seems if you override a variable in sass it propagates downwards from where it changes, so the application can only change it for itself.
• Can you pass paths to a sass file when you import?

---

My use case is specific to angularjs, but I'm sure the same issues apply to W3C web components, and libraries like polymer and mozilla brick.

Any ideas?

Edit: views folder is same level as assets

Answer 1

I also had the same issue by creating closed components.

My approach

In the following example sass-bootstrap is used for demonstration purposes including your own prefix-component-name.

First its a good approach to use the assets folder to store all separated assets from the views. I would also prefer to use kind of a vendor.scss in your stylesheets (SASS) to have a
separated file for something like the import path (you will come to limits with variables: sass/compass import variable issue).

directory structure

app
  |-- public
    |-- components
       |-- prefix-component-name
          |-- assets
            |-- sass
               |-- styles.scss
            |-- img
            |-- ...
          |-- views
            |-- index.html
            |-- ...
      |-- bootstrap-sass
        |-- vendor
          |-- assets
            |-- stylesheets // https://github.com/thomas-mcdonald/bootstrap-sass/tree/master/vendor/assets/stylesheets
               |-- bootstrap
               |-- bootstrap.scss
        |-- ...
    |-- img
    |-- css
    |-- js
    index.html
  |-- views
    |-- sass
      |-- vendors.scss
      |-- application.scss

vendor.scss

@import '../../public/components/bootstrap-sass/vendor/assets/stylesheets/bootstrap.scss'; @import '../../public/components/prefix-component-name/assets/sass/styles.scss';

Sadly wildcard imports a currently not supported.

Your questions

1. My preference to use separate all assets made it easy to reference inside your stylesheets to images relatively to the component.

2. I didn't clearly got your question, but i guess the vendors.scss solves the storing of variables for paths.

3. Yes it gets in inherently. When you firstly import the vendors.scss in the applicaion.scss and you defined a variable in there you have it also available in application.scss.