Django-compressor: Sass、コンプレッサーを使用した場合と使用しない場合の結果が異なり、解析エラーが発生する

こんにちは、Bootstrap 4 alpha 6 の使用中に問題が発生しました。BS4 をインクルードした後のすべての CSS がブラウザーによって無視されることに遭遇しました。 さらに掘り下げると、生成された CSS の解析エラーが見つかりました。

Django 1.8.17、Compressor 2.1.1、Sass 3.4.22 を使用しています

最初に見つけた解析エラーをここに文書化します。

エラーは二重引用符で"でstroke='rgba(0, 0, 0, 0.5")',それがあるべき一方、 stroke='rgba(0, 0, 0, 0.5)' 。 これにより、ドキュメントで解析エラーが発生します。

無効な行 (dj コンプレッサー経由)

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5")' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

有効な行 (sass direct 経由)

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

コンパイル済みバージョンと一致します。

_background-image_のソース

$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;

$navbar-light-color:                rgba($black,.5) !default;

$black:  #000 !default;

dj コンプレッサーで生成する方法

{% compress css %}
<link rel="stylesheet" type="text/x-scss" media="screen" charset="utf-8"
    href="/static/bootstrap/scss/bootstrap.scss" />
{% endcompress %}

COMPRESS_PRECOMPILERS = (
    ('text/coffeescript', 'coffee --compile --stdio'),
    ('text/x-sass', 'sass {{infile}} {{outfile}} --load-path {}'.format(LIB_PATH)),
    ('text/x-scss', 'sass --scss {{infile}} {{outfile}} --load-path {}'.format(LIB_PATH)),
)