私は現在、angularjs プロジェクトに取り組んでおり、再利用可能なコンポーネントを構築しようとしています。
コンポーネントに含めたい画像/スタイルシートをどのようにパッケージ化すればよいのでしょうか?
私が欲しいもの：
- サススタイル
- コンポーネントディレクトリ内に画像を保存する場所と、スタイルシートでそれらを参照する方法
- コンポーネントを使用してアプリケーションでオーバーライド可能なスタイル
現在、私の考えは次のとおりです。
bower components ディレクトリ ( app/public/components) にコンポーネントを作成します。
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
application.scss は、次のようなコンポーネントのスタイルをインポートします
@import "../../public/components/prefix-component-name/views/sass/styles";
よくわからない点:
- 画像を参照するにはどうすればよいですか? アプリケーション開発者のパスが変更された場合はどうなりますか? コンポーネントでそのパスの sass 変数を作成しますか?
- アプリケーションで sass ファイルの変数をオーバーライドするにはどうすればよいですか? アプリケーション開発者にそれをしてもらいたいですか? sass で変数をオーバーライドすると、変更された場所から下方に伝播するように見えるため、アプリケーションはそれ自体でしか変更できません。
- インポート時に sass ファイルへのパスを渡すことはできますか?
私の使用例は angularjs に固有のものですが、同じ問題がW3C web componentsや、 polymerやmozilla brickなどのライブラリにも当てはまると確信しています。
何か案は？
編集：viewsフォルダはと同じレベルですassets