Vue.js lessで外部のlessファイルをImportする
Vue.js lessを使いwebpackでビルドするで.vueファイル（単一ファイルコンポーネント）のstyleをcssではなくlessで実装して、webpackでビルドをしました。
メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。
.vueファイル内のlessで外部のlessファイルをImportする方法を紹介します。
lessファイルの作成
jsフォルダと同じ階層にlessフォルダを作成します。
- node_modules
- public
- js
- index.html
- resources
- assets
- js
- less ←追加
- assets
- package.json
- webpack.config.json
追加したlessフォルダの中にvariables.lessというファイルを作成します。
variables.less@red: #ff1122;vueファイルの編集
通常のlessでの実装と同じように上記で作成したファイルをインポートします。
各vueファイルを基準にした相対パスとなります。
App.vue<style lang="less" scoped>
@import "./../../less/variables";
.message {
color: @red;
}
</style>絶対パスで指定する方法
上記のように相対パスで指定すると、vueファイルのフォルダ構成が変わるたびにパスも修正しなければならないため、絶対パスで指定したいところです。
絶対パスで指定する方法をwebpack モジュールのパスを絶対パスで指定する方法で紹介します。