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はなくても構いませんが、古いブ...
- webpack モジュールのパスを絶対パスで指定する方法
自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...
- less cssファイルをそのままImportする
lessでcssファイルをそのままImportする方法を紹介します。cssの@importではなく、lessのコンパイル時にcssを読み込みます。下記のように(inline)を追加します。lessで実...
- webpack lessをImportしてビルドする
htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...
- cssのcalcの設定をlessで記述するときの注意点
cssで計算式を行うためのcalcをlessで同じように実装するには少し工夫が必要です。普通にcalcを指定すると、lessをコンパイルしたタイミングで計算が行われてしまいます。以下のようにダブルクォ...
- Vue.js lessで外部のlessファイルをImportする
メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...
- less font-sizeをremで汎用的に使いこなす
css3ではremという単位でルートの要素のサイズに対しての相対的な値を指定できるようになりました。その便利なremをlessのミックスインを使って便利に使いこなす方法を紹介します。フォントサイズはこ...
- Vue.js lessを使いwebpackでビルドする
.vueファイル（単一ファイルコンポーネント）のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。
- Vue.jsを学習する上で知っておきたいES2015の文法
Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。objectの中...
- Vuex stateを作成して各コンポーネントで参照する
実際にstoreを作成して、各コンポーネントでその値を参照できるようにします。mutations.jsにstateのオブジェクトを定義します。stateがアプリケーション全体の状態を管理します。