ちょっと詰まったので備忘録として。
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
/* フォント設定 */@importurl(https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP|Roboto+Mono&display=swap);Microsoftが自社サービスのInternet Explorerサポート終了を打ち出したので、Internet Explorerはもうそろそろ考えなくても良いかな。