やあ! とにかく、特定のブロックでCSSまたはJSを収集して連結し、それをフィルターチェーンに渡す方法はありますか? 特に、pyScssを使用してSCSSを処理したいと思います。 私が作成したpySCSSFilter
拡張FilterBase
、私はのような何かをしたい本当に好き:
{% compress css %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/mixins.scss" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/base.scss" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/other.scss" />
{% endcompress %}
しかしもちろん、私のファイルは互いに分離して処理されるため、機能しません。
方法はありますか?
乾杯!
うーん、それはまさに私が望まないことです。
それらが同じベースパスになく、同じ@importステートメントを持っているが、異なるパスにあるために異なるファイルを参照している場合はどうなりますか。
現在、ファイルのコンテンツはプロセッサに渡される前に一時ファイルに書き込まれるため、 @ importは機能しません。
ファイルを1つずつ処理してから連結して、コンパイルのすべての参照が正しくなるようにします。
事前にコンパイルする前にファイルを連結する方法に投票します。 これは、使用量が少ないなどの場合に非常に役立ちます。これは、ミックスインとグローバル変数を1つのファイルに保持し、コンパイルする前にマージすることが主流であるためです。 今のところ、すべてのcssファイルでこれらの変数とミックスインを繰り返す必要があります。つまり、複数のcssファイルで使用される肌の色のグローバル変数のセットがある場合、sass以下のようなcssフレームワークでグローバル変数を使用する目的が台無しになります。 、すべてを1つのファイルに保存しない限り。
hvdklauwが言及している問題を理解しているので、プリコンパイルの前または後にマージするかどうかにかかわらず、各圧縮ブロックのオプションになる可能性がありますか?
@gensmann圧縮ブロックにオプションを追加することは、計画のように聞こえます。
cssプリプロセッサをそれほど使用しない場合は非常に重要です。その「コア」機能により、ミックスインを使用できるようになります。 したがって、フィルターを介して処理する前にファイルを連結することは必須の機能です。 @jannonリクエストをマージしてdevブランチdjango_compressorを実行する計画はありますか?
Sassに関しては、これに対する私のアプローチは、sassバイナリのすべてのインクルードパスを定義してから、scssファイル内の他のファイルを@import
定義することです。
# app/settings/common.py
...
scss_args = " ".join(["--include-path %s/vendor/bourbon/app/assets/stylesheets/" % VENDOR_ROOT,
"--include-path %s/vendor/bootstrap-sass-official/vendor/assets/stylesheets/" % VENDOR_ROOT])
...
COMPRESS_PRECOMPILERS = (
('text/coffeescript', 'node_modules/.bin/coffee --compile --stdio'),
('text/x-scss', 'node_modules/.bin/node-sass %s {infile} {outfile}' % scss_args)
)
...
// app/common/static/css/screen.scss
<strong i="9">@import</strong> url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
<strong i="10">@import</strong> "./vendor.scss";
<strong i="11">@import</strong> "./elements.scss";
<strong i="12">@import</strong> "./pages.scss";
body, html {
font-family: 'Montserrat';
}
// app/common/static/css/vendor.scss
<strong i="15">@import</strong> "_bourbon.scss";
<strong i="16">@import</strong> "bootstrap.scss";
<! -- app/common/templates/base.html -->
...
{% compress css %}
<link href="{% static 'css/screen.scss' %}" type='text/x-scss' media='screen, projector' rel='stylesheet'>
{% endcompress %}
...
@airtonix私はこれを始めましたが、 @import
'edファイルへの変更は監視されないため、CSSが変更されるたびにサーバーを再起動する必要があります。
ちょっと、この機能がまだ実装されていないことに驚いています。 webassetsはこれを解決し、ユーザーがSASS_AS_OUTPUT = True
を使用できるようにしました。これにより、オプションで最初にファイルが連結されます。
最も参考になるコメント
cssプリプロセッサをそれほど使用しない場合は非常に重要です。その「コア」機能により、ミックスインを使用できるようになります。 したがって、フィルターを介して処理する前にファイルを連結することは必須の機能です。 @jannonリクエストをマージしてdevブランチdjango_compressorを実行する計画はありますか?