LegacyFileOptions<sync>

互換性（SASS_PATH）

Dart Sass

1.15.0以降

Node Sass

3.9.0以降

➤

この文字列配列オプションは、Sass がスタイルシートを検索するためのロードパスを提供します。以前のロードパスは、後のものよりも優先されます。

sass.renderSync({
  file: "style.scss",
  includePaths: ["node_modules/bootstrap/dist/css"]
});
Copy

ロードパスは、SASS_PATH 環境変数も設定されている場合は、そこからロードされます。この変数は、パスのリストであり、;（Windowsの場合）または :（その他のオペレーティングシステムの場合）で区切られている必要があります。includePaths オプションからのロードパスは、SASS_PATH からのロードパスよりも優先されます。

$ SASS_PATH=node_modules/bootstrap/dist/css sass style.scss style.css
Copy

互換性

Dart Sass

1.39.0 以降

Node Sass

✗

デフォルトでは、CSSドキュメントに非ASCII文字が含まれている場合、Sass は（拡張出力モードで）@charset 宣言または（圧縮モードで）バイトオーダーマークを追加して、ブラウザやその他のコンシューマーにエンコーディングを示すようにします。charset が false の場合、これらの注釈は省略されます。

互換性

Dart Sass

✓

Node Sass

3.0.0 以降

生成された CSS のインデントに、スペースを使用するかタブを使用するか。

const result = sass.renderSync({
  file: "style.scss",
  indentType: "tab",
  indentWidth: 1
});

result.css.toString();
// "h1 {\n\tfont-size: 40px;\n}\n"
Copy

デフォルト値

'space'

互換性

Dart Sass

✓

Node Sass

3.0.0 以降

生成された CSS のインデントレベルごとに使用するスペースまたはタブの数（indentType に依存）。0 から 10（両端を含む）の間でなければなりません。

デフォルト値

2

互換性

Dart Sass

✓

Node Sass

3.0.0 以降

生成された CSS の各行の末尾に使用する文字シーケンス。次の値を指定できます。

• 'lf' は、U+000A LINE FEEDを使用します。
• 'lfcr' は、U+000A LINE FEED に続いて U+000D CARRIAGE RETURN を使用します。
• 'cr' は、U+000D CARRIAGE RETURN を使用します。
• 'crlf' は、U+000D CARRIAGE RETURN に続いて U+000A LINE FEED を使用します。

デフォルト値

'lf'

コンパイルされた CSS の出力スタイル。4つの出力スタイルがあります。

• "expanded"（Dart Sass のデフォルト）は、各セレクタと宣言を独自の行に書き込みます。

• "compressed" は、できるだけ多くの余分な文字を削除し、スタイルシート全体を単一行に書き込みます。

• "nested"（Node Sass のデフォルト。Dart Sass ではサポートされていません）は、CSS ルールを Sass ソースのネストに合わせてインデントします。

• "compact"（Dart Sass ではサポートされていません）は、各 CSS ルールを独自の単一行に配置します。

例

const source = `
h1 {
  font-size: 40px;
  code {
    font-face: Roboto Mono;
  }
}`;

let result = sass.renderSync({
  data: source,
  outputStyle: "expanded"
});
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// h1 code {
//   font-face: Roboto Mono;
// }

result = sass.renderSync({
  data: source,
  outputStyle: "compressed"
});
console.log(result.css.toString());
// h1{font-size:40px}h1 code{font-face:Roboto Mono}

result = sass.renderSync({
  data: source,
  outputStyle: "nested"
});
console.log(result.css.toString());
// h1 {
//   font-size: 40px; }
//   h1 code {
//     font-face: Roboto Mono; }

result = sass.renderSync({
  data: source,
  outputStyle: "compact"
});
console.log(result.css.toString());
// h1 { font-size: 40px; }
// h1 code { font-face: Roboto Mono; }
Copy

すべてのスタイルシートで利用できる追加の組み込み Sass 関数。このオプションは、キーが Sass 関数のシグネチャであり、値が LegacyFunction であるオブジェクトを受け取ります。各関数は、そのシグネチャと同じ引数を受け取る必要があります。

関数には、LegacyValue のサブクラスが渡され、同じものを返す必要があります。

例

sass.render({
  data: `
h1 {
  font-size: pow(2, 5) * 1px;
}`,
  functions: {
    // This function uses the synchronous API, and can be passed to either
    // renderSync() or render().
    'pow($base, $exponent)': function(base, exponent) {
      if (!(base instanceof sass.types.Number)) {
        throw "$base: Expected a number.";
      } else if (base.getUnit()) {
        throw "$base: Expected a unitless number.";
      }

      if (!(exponent instanceof sass.types.Number)) {
        throw "$exponent: Expected a number.";
      } else if (exponent.getUnit()) {
        throw "$exponent: Expected a unitless number.";
      }

      return new sass.types.Number(
          Math.pow(base.getValue(), exponent.getValue()));
    },

    // This function uses the asynchronous API, and can only be passed to
    // render().
    'sqrt($number)': function(number, done) {
      if (!(number instanceof sass.types.Number)) {
        throw "$number: Expected a number.";
      } else if (number.getUnit()) {
        throw "$number: Expected a unitless number.";
      }

      done(new sass.types.Number(Math.sqrt(number.getValue())));
    }
  }
}, function(err, result) {
  console.log(result.css.toString());
  // h1 {
  //   font-size: 32px;
  // }
});
Copy

互換性

Dart Sass

✓

Node Sass

3.0.0 以降

➤

互換性（インポート順序）

Dart Sass

1.20.2 以降

Node Sass

✗

➤

@use ルールまたは @import ルールが検出されたときに、ファイルをロードするための追加のハンドラ。単一の LegacyImporter 関数、または LegacyImporter の配列にすることができます。

インポータは、@import または @use ルールの URL を受け取り、そのルールをどのように処理するかを示す LegacyImporterResult を返します。詳細については、LegacySyncImporter および LegacyAsyncImporter を参照してください。

ロードは、次の順序で試行することによって解決されます。

• @use または @import が記述されたファイルに対する相対的なディスクからのファイルのロード。

• 各カスタムインポータ。

• 現在の作業ディレクトリを基準としたファイルの読み込み。

• includePaths内の各ロードパス。

• SASS_PATH環境変数で指定された各ロードパス。Windowsではセミコロン区切り、それ以外ではコロン区切りにする必要があります。

例

sass.render({
  file: "style.scss",
  importer: [
    // This importer uses the synchronous API, and can be passed to either
    // renderSync() or render().
    function(url, prev) {
      // This generates a stylesheet from scratch for `@use "big-headers"`.
      if (url != "big-headers") return null;

      return {
        contents: `
h1 {
  font-size: 40px;
}`
      };
    },

    // This importer uses the asynchronous API, and can only be passed to
    // render().
    function(url, prev, done) {
      // Convert `@use "foo/bar"` to "node_modules/foo/sass/bar".
      const components = url.split('/');
      const innerPath = components.slice(1).join('/');
      done({
        file: `node_modules/${components.first}/sass/${innerPath}`
      });
    }
  ]
}, function(err, result) {
  // ...
});
Copy

互換性

Dart Sass

2.0以降

Node Sass

✗

このオプションがNodePackageImporterのインスタンスに設定されている場合、Sassは組み込みのNode.jsパッケージインポーターを使用して、pkg:URLスキームを持つSassファイルを解決します。ライブラリ作成者とユーザーの詳細については、NodePackageImporterのドキュメントを参照してください。

例

sass.renderSync({
  data: '@use "pkg:vuetify";',
  pkgImporter: new sass.NodePackageImporter()
});
Copy

致命的として扱う非推奨のセット。

指定されたいずれかの型の非推奨警告がコンパイル中に発生した場合、コンパイラーは代わりにエラーを発生させます。

Versionが指定されている場合、そのコンパイラバージョンでアクティブだったすべての非推奨は致命的として扱われます。

互換性

dart: "1.78.0", node: false

早期にオプトインする将来の非推奨のセット。

ここで渡された将来の非推奨は、コンパイラーによってアクティブとして扱われ、必要に応じて警告を発行します。

互換性

dart: "1.78.0", node: false

互換性

Dart Sass

1.43.0以降

Node Sass

✗

Sassからの警告やデバッグメッセージを処理するために使用するオブジェクト。

デフォルトでは、Sassは標準エラーに警告とデバッグメッセージを出力しますが、warnまたはdebugが設定されている場合は、代わりにこれらを呼び出します。

特別な値silentを使用すると、すべてのメッセージを簡単に抑制できます。

互換性

Dart Sass

1.35.0以降

Node Sass

✗

このオプションがtrueに設定されている場合、Sassは依存関係によって引き起こされる警告を出力しません。「依存関係」は、includePathsまたはimporterを介してロードされるファイルとして定義されます。エントリポイントを基準としてインポートされるスタイルシートは、依存関係とは見なされません。

これは、自分では修正できない非推奨警告を抑制するのに役立ちます。ただし、可能な限り早く修正できるように、依存関係にも非推奨について通知してください！

デフォルト値

false

無視するアクティブな非推奨のセット。

指定されたいずれかの型の非推奨警告がコンパイル中に発生した場合、コンパイラーは代わりにそれを無視します。

互換性

dart: "1.78.0", node: false

互換性

Dart Sass

1.35.0以降

Node Sass

✗

デフォルトでは、Dart Sassはコンソールノイズでユーザーを圧倒しないように、コンパイルごとに同じ非推奨警告の5つのインスタンスのみを出力します。verboseをtrueに設定すると、代わりに発生するすべての非推奨警告を出力します。

デフォルト値

false

trueの場合、Sassは生成されたCSSからソースマップへのリンクを追加しません。

const result = sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  omitSourceMapUrl: true
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
Copy

デフォルト値

false

Sassが生成されたCSSの保存先として期待する場所。これは、生成されたCSSからソースマップへのリンク、およびソースマップからSassソースファイルへのリンクに使用されるURLを決定するために使用されます。

result = sass.renderSync({
  file: "style.scss",
  sourceMap: true,
  outFile: "out.css"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.css.map * /
Copy

Sassがソースマップを生成するかどうか。生成する場合、ソースマップはmapとして利用可能になります（sourceMapEmbedがtrueでない限り）。

このオプションが文字列の場合、ソースマップが書き込まれると予想されるパスです。これは、生成されたCSSからソースマップへのリンク、およびソースマップからSassソースファイルへのリンクに使用されます。sourceMapが文字列で、outFileが渡されない場合、SassはCSSがファイルオプションが渡された場合と同じディレクトリに書き込まれると想定します。

このオプションがtrueの場合、パスはoutFileに.mapを末尾に追加したものであると想定されます。trueで、outFileが渡されない場合、効果はありません。

例

let result = sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.map * /

result = sass.renderSync({
  file: "style.scss",
  sourceMap: true,
  outFile: "out.css"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.css.map * /
Copy

デフォルト値

false

生成されたCSSに貢献したSassファイル全体のコンテンツをソースマップに埋め込むかどうか。これにより、非常に大きなソースマップが生成される可能性がありますが、CSSがどのように提供されても、ソースがどのコンピューターでも利用できることが保証されます。

例

sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  sourceMapContents: true
})
Copy

デフォルト値

false

ソースマップファイルの内容を、別のファイルを作成してCSSからリンクするのではなく、生成されたCSSに埋め込むかどうか。

例

sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  sourceMapEmbed: true
});
Copy

デフォルト値

false

これが渡された場合、ソースマップからSassソースファイルへのすべてのリンクにこれが先頭に追加されます。