lessをImportしてビルドするzukucode主にWEB関連の情報を技術メモとして発信しています。lessを使いwebpackでビルドするでvueファイルの中でlessを実装してビルドする方法を紹介しました。htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpackでビルドする方法を紹介します。lessを使いwebpackでビルドするでインストールしたパッケージと同様ですが、もしインストールしていない場合は以下をインストールします。css-loaderwebpack.config.jsの設定vue-loaderのオプションで指定したlessのloaderと同じloaderでrulesに追加します。lessで外部のlessファイルをImportするで扱ったフォルダ構成を使用します。lessフォルダのvariables.lessを以下のようにします。#1122ff;lessフォルダの中にapp.lessというファイルを作成します。@blue;}lessファイルのImportエントリーポイントのapp.jsで先ほど作成したapp.lessをインポートします。モジュールのパスを絶対パスで指定する方法で紹介した方法で、モジュールのパスは絶対パスで指定しています。実行するとapp.lessのスタイルが適用され、背景色が青になります。自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。lessで外部のlessファイルをImportするメインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。lessを使いwebpackでビルドする.vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。ExtractTextPluginでcssファイルを出力するwebpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...webpack-dev-serverで開発サーバーを起動するwebpack-dev-serverで開発サーバーを起動します。Replacement(HMR)の設定を行います。webpackでページごとにファイルを分割するvue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...vueファイル(単一ファイルコンポーネント)をwebpackでビルドvueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。postcssを導入するwebpackでpostcssを導入してautoprefixerなどを行います。postcss-loaderはwebpackでpostcssを行うために必要です。postcssの設定ファイルを作成しま...webpack-dev-serverでhttpsでのアクセスを可能にする方法webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。システム日付をYYYYMMDD形式などの文字列型に変換する当ホームページに記載されている会社名・製品名・システム名などは、各社の登録商標、もしくは商標です。