Vue.js lessを使いwebpackでビルドする
.vueファイル（単一ファイルコンポーネント）のstyleをcssではなくlessで実装して、webpackでビルドをします。
sassでも以下記事のlessの文言がsassに置き換わるくらいでやり方は基本的には同じです。
パッケージのインストール
以下のパッケージが必要なのでインストールをします。
- less
- less-loader
- style-loader
- css-loader
$ npm install --save-dev less less-loader style-loader css-loaderwebpack.config.jsの設定
webpack-dev-serverで開発サーバーを起動するで紹介したwebpack.config.jsに設定を追記します。
vue-loaderのオプションにlessのloaderを追加します。
webpack.config.js// 一部抜粋
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader',
less: ['style-loader', 'css-loader', 'less-loader']
}
}
}
]
},vueファイルの編集
styleタグにlang="less"を追加するとlessとして読み込まれます。
App.vue<template>
<div class="message">
{{ message }}
</div>
</template>
<style lang="less" scoped>
@red: #ff0000;
.message {
color: @red;
}
</style>
<script>
export default {
data () {
return {
message: 'hello hmr'
};
}
};
</script>実行
ビルドをすると内部的にlessがコンパイルされてスタイルが適用されます。
外部のlessファイルを読み込む方法をVue.js lessで外部のlessファイルをImportするで紹介します。