Lessで@importを展開しないでそのままCSSにする方法

ちょっと詰まったので備忘録として。

Lessで@importをそのまま使うと、外部のサイトでもインポートして展開されてしまう。lesscで変換しようにも社内のプロキシ環境で使うとコネクションエラーが発生するし、Google Fontsを使うときも展開しては欲しくない。less.jsに動的に変換させればよいのだが、Internet Explorer 11では動かない。これは困った。

探していたら、ちゃんとマニュアル (英語) に書いてあった。このcssオプションを使えば展開されずにそのままCSSに出力される。

sample.less

/* フォント設定 */
@import (css) url(https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP|Roboto+Mono&display=swap);

sample.css

/* フォント設定 */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP|Roboto+Mono&display=swap);

Microsoftが自社サービスのInternet Explorerサポート終了を打ち出したので、Internet Explorerはもうそろそろ考えなくても良いかな。