19

ここで説明するように、 Sassを使用して、複数の.SCSSまたは.SASS入力ファイルを単一の.CSS出力ファイルにコンパイルできます。@import

通常の.CSSファイルを含めるために使用する場合@import、それらはマージされません。出力.CSSファイルにはまだ@importディレクティブが含まれています。それは理にかなっている。

しかし、この動作をオーバーライドする方法はありますか？おそらく、Sassコンパイラへのコマンドラインスイッチですか？@import "foo.css";つまり、 .SCSSファイルであるかのように強制的にマージを試みるようにSassに指示できますか？

多くの.CSSファイルを含むサードパーティライブラリ（Google Closure Library ）を使用しています。私は自分のプロジェクトでこれらのいくつかだけを使用しています。これらすべてのファイルの名前を.SCSSに変更したり（これは機能するようですが）、コンテンツをコピーして.SCSSファイルに貼り付ける（これも機能します）などの手動による解決策は避けたいと思います。そして、私はそれらすべてをクライアント側にインポートするために提供したくありません。私は本当にSassに、私が「そのまま」使用するいくつかの.CSSファイルを含めて、単一の出力スタイルシートを作成したいと思っています。可能？私が見なければならない他のツールはありますか？

4

3 に答える 3

11

すべての CSS ファイルも有効な SCSS です。そのため、「目に見えない」ようにインポートまたはマージする必要があるファイルを変更すると_filename.scss、メインの scss ファイルから @import @import "filename";(拡張子はオプション) を使用して @import ステートメントのない 1 つの大きな CSS にコンパイルする必要があります。その中

追加するために編集: 申し訳ありませんが、ブラウザがクラッシュした後にあなたの編集を見ました..それがあなたが探しているものではないことを確認してください.別の方法はわかりません.

于 2011-04-16T17:41:10.640 に答える
3

Sassでこれを行う方法が見つかりませんでした。

私の回避策は、サード パーティのライブラリを URL から直接インポートすることです。もちろん、これは URL 経由で提供される CSS ライブラリに対してのみ機能します。まだ複数のファイルをインポートしていますが、少なくともファイルの名前を変更したり、ベンダーの CSS ライブラリの変更されたコピーを管理したりする必要はありません。

例：

// ORIGINAL: locally managed, modified copy (bad), no @import in output (good)
@import 'my_modified_copy/closure/goog/css/common.scss';

// WORKAROUND: vendor-managed (good): @import in output (bad but acceptable)
@import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';

リリース前に、ベンダーから現在のバージョンを取得し、すべての .css ファイルの名前を .scss ファイルに変更するスクリプトを追加する予定です。しかし、今のところ、上記の回避策は開発に受け入れられます。

于 2011-04-18T15:51:15.673 に答える
2

これはサーバー側で実行でき、オプションの場合は少し面倒な作業を省くことができます。ファイルをマージしているだけであり、CSSであるため、サイトに害を及ぼす可能性のある情報の競合が発生することはありません。また、この方法により、フレームワークが改善されたときにCSSを更新できる柔軟性が得られます。

Rubyは私の選択した言語ではありませんが、ここで必要なすべてのことを実行するのに非常に実行可能です。CSSとJSファイルでこれを行うRubyで書かれたツールがあります。要約を取得するには、このブログ投稿をご覧ください：http: //cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

これがお役に立てば幸いです。他に何か必要な場合はお知らせください。

于 2011-04-16T21:13:03.663 に答える