webpack lessをImportしてビルドする
Vue.js lessを使いwebpackでビルドするでvueファイルの中でlessを実装してビルドする方法を紹介しました。
htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。
外部のlessファイルをモジュールとしてImportしてwebpackでビルドする方法を紹介します。
パッケージのインストール
Vue.js lessを使いwebpackでビルドするでインストールしたパッケージと同様ですが、もしインストールしていない場合は以下をインストールします。
- less
- less-loader
- style-loader
- css-loader
$ npm install --save-dev less less-loader style-loader css-loaderwebpack.config.jsの設定
vue-loaderのオプションで指定したlessのloaderと同じloaderでrulesに追加します。
webpack.config.js// 一部抜粋
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader',
less: ['style-loader', 'css-loader', 'less-loader']
}
}
},
{
test: /\.less$/,
loader: ['style-loader', 'css-loader', 'less-loader'],
exclude: /node_modules/
}
]
},動作確認
lessファイルの作成
Vue.js lessで外部のlessファイルをImportするで扱ったフォルダ構成を使用します。
lessフォルダのvariables.lessを以下のようにします。
variables.less@red: #ff1122;
@blue: #1122ff;lessフォルダの中にapp.lessというファイルを作成します。
app.less@import "./variables";
body {
background-color: @blue;
}lessファイルのImport
エントリーポイントのapp.jsで先ほど作成したapp.lessをインポートします。
webpack モジュールのパスを絶対パスで指定する方法で紹介した方法で、モジュールのパスは絶対パスで指定しています。
app.jsimport 'less/app.less';
import Vue from 'vue';
import App from 'js/components/App.vue';
new Vue({
el: '#app',
render: h => h(App)
});実行
実行するとapp.lessのスタイルが適用され、背景色が青になります。