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