web-dev-qa-db-ja.com

プロジェクトでコンパスを使用するようにwebpackを構成する方法

私はwebpackを初めて使用しますが、プロジェクトでCompass（CSS Authoring Framework）を使用する方法がわかりません。

良い方法はありますか？

ありがとう

csswebpackcompass
12
David Auvray

@Ayman Jitanの回答への必須の追加 https://stackoverflow.com/a/34967698/1114926 。

_styles.scss_ファイルの先頭に次の2行を追加する必要があります。

_@import "compass";  // <--
@import "compass/functions";  // <--

.foo {
    min-height: 100px;
    background-color: #fff;
}
_

そうしないと、_sass-loader_「モジュールのビルドに失敗しました」および「ミックスインが見つかりません」からエラーが発生します。次のように」

_Module build failed:
undefined
                ^
      No mixin named background
_

_@import "compass/functions";_のみ（_@import "compass";_なし）を追加すると、このエラーが発生する場合があります（含めるミックスインによって異なりますが、私の場合は@include background(linear-gradient(white, #cccccc, #aaaaaa));によってスローされました）。

_Module build failed:
undefined
                          ^
      Media query expression must begin with '('
_
1
Green

コンパスはハーフルビーとハーフサスのフレームワークであるため、 compass-mixins はレガシーscssコードでは正しく機能しない可能性があります。

Webpack構成で元のコンパスを有効にするには、次を使用する必要があります。

Ruby-sass-loader

compassオプションを使用します。

module.exports = {
  // ...    
  module: {
    loaders: [
      /* some other loaders */
      {
        test: /\.scss$/,
        loader: 'style!css!Ruby-sass?compass=1'
      }
    ]
  }
};

NB！：コンパスは サポートされなくなりました

1
Anton