less cssファイルをそのままImportする
lessでcssファイルをそのままImportする方法を紹介します。
cssの@importではなく、lessのコンパイル時にcssを読み込みます。
下記のように(inline)を追加します。
@import (inline) "foo.css";lessで実装しているときに外部のcssを取り込みたい場合などに使用します。
続きを表示
- gulp lessをcssにコンパイルする
lessファイルをgulpを使ってcssにコンパイルします。gulp-lessとgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブ...
- Vue.js lessを使いwebpackでビルドする
.vueファイル（単一ファイルコンポーネント）のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。
- Vue.js lessで外部のlessファイルをImportする
メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...
- webpack モジュールのパスを絶対パスで指定する方法
自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...
- webpack lessをImportしてビルドする
htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...
- less font-sizeをremで汎用的に使いこなす
css3ではremという単位でルートの要素のサイズに対しての相対的な値を指定できるようになりました。その便利なremをlessのミックスインを使って便利に使いこなす方法を紹介します。フォントサイズはこ...
- cssのcalcの設定をlessで記述するときの注意点
cssで計算式を行うためのcalcをlessで同じように実装するには少し工夫が必要です。普通にcalcを指定すると、lessをコンパイルしたタイミングで計算が行われてしまいます。以下のようにダブルクォ...