0

主にJavaScriptであるWebソフトウェア/ Webアプリを持っています。extJS フレームワークとかなりのカスタム スクリプトを使用します。main.css と呼ばれるグローバル スタイルシートは、extJS ライブラリ スタイルと、独自の新しいスタイルおよび extJS スタイル オーバーライドで構成されます。これはすべてSASSを使用してコンパイルされています。

ここで、アプリを Web ページに埋め込みたいと考えています。これは埋め込みラッパーなしで行われていますが、実際にはグローバル スタイルを使用するなど、ページ内でアプリを実行しています。

ページ内の外部コンテンツ (非アプリ) は、Bootstrap CSS フレームワークといくつかの jquery 要素を使用したカスタム デザインであり、いくつかの Bootstrap オーバーライドといくつかのカスタム スタイルが含まれています。

Bootstrap をグローバル CSS として読み込むことはできません。スタイルが大きく異なり、アプリのスタイルとは独立しているため、衝突を避けたいからです。

バージョン管理やコア フレームワーク (extJS、bootstrap、jquery など) の更新などを簡単に実行し、グローバル スタイル間の衝突を回避して、それらを異なるサイロとして効果的に処理できるように、関連する領域のスタイルをどのように呼び出すことができますか?

4

1 に答える 1

0

私はこれに対する重要な部分を誤解しているかもしれませんが、SASSを使用しているので、単純に次のものを使用できますか？

#some-custom-area {
    @import "path/to/bootstrap-result.css";
}

つまり、Bootstrap CSSフレームワークと、そのフレームワーク用に作成したすべてのカスタムルール（コンパイル後に配置されるCSSファイル）を取得して、グローバルスタイルシートにインポートします...ただし、#some-custom-areaセレクターでラップします。SASSがそれをコンパイルすると、ブートストラップ側からのすべてのルールが内でのみ有効であることが保証されます#some-custom-area。

それは実行可能ですか？

于 2012-07-08T12:10:13.063 に答える