コンパスの「box-shadow」mixinが返す無効なプロパティ値

Question

何らかの理由でbox-shadow mixinは、ブラウザで無効な値を返します。それはなぜ起こるのですか？直し方？私.scssで

：

@import "compass/css3/box-shadow"; 

@include box-shadow(0px 1px 5px 1px #c4c3c3); 

戻り値この：

-webkit-box-shadow: compact(0px 1px 5px 1px #c4c3c3, false, false, false, false, false, false, false, false, false); 
-moz-box-shadow: compact(0px 1px 5px 1px #c4c3c3, false, false, false, false, false, false, false, false, false); 
box-shadow: compact(0px 1px 5px 1px #c4c3c3, false, false, false, false, false, false, false, false, false); 

私はWebPACKののsassとcssローダーとコンパスを使用しています。これは<script>タグで返されるものです。

UPD：

これはnode-sass問題であるように見えます。 sass-loaderはnode-sassを使用し、node-sassはコンパスと互換性がありません。 https://github.com/sass/node-sass/issues/1004

Answer 1

私は同じ方法でボックスシャドウをインポートしていましたが、同じ問題が発生しています。@import "compass/css3/box-shadow";

これは正しく動作するはずですか？どうして私はCompassからSASSコンパイラをgulp-sassに更新したと言っているか以外には答えられません。 （コメントの後、ノード - サスが関係しているように思えます。私はあなたのようなものをインポートすることを好みます）。私はHarryとして見つけました、それはチェーンが失敗しているようです。このI@import "compass/css3";に私のimport文を更新し、期待どおりにを働いたを解決するには

。これはあなたを得るでしょうが、あなたの状況によっては理想的ではないかもしれません。

希望すると助かります！

Answer 2

私は同じ問題を抱えていましたが、その後、私の値の "px"を含んでいなかったということがわかりました。

設定した各値にpxを追加する必要がありました。数値の横にある必要があるため、8pxなどのように、以下に示す補間構文を使用する必要がありました。

@mixin halo($halo-color: $gray-base, $halo-width: 8) { 
    -moz-box-shadow: 0 0 #{$halo-width}px $halo-color; 
    -webkit-box-shadow: 0 0 #{$halo-width}px $halo-color; 
    box-shadow: 0 0 #{$halo-width}px $halo-color; 
}