Posted: 2018.10.23 / Category: javascript / Tag: Vue

Vue.jsのコンポーネントライブラリにElementUIというのがあります。そのままでもいい感じなのですが、ちょっと色とかマージンを調節したいケースがあるかと思います。そこでここではカスタマイズの方法をご紹介します。

Vue CLI を使用している場合はwebpack.config.jsを編集してscssファイルを読み込めるように編集します。

webpack.config.js

module.exports = {
module: {
	rules: [
	// ...
	{
		test: /\.scss$/,
		loader: 'vue-style-loader!css-loader!sass-loader'
	},
}

新しくelement-variables.scssという名前でscssファイルを作成します。
下記の例だと文字サイズとカラーを変更しています。
変更したい変数を記述したら最後に「~element-ui/packages/theme-chalk/src/index」をインポートします。

element-variables.scss

$--font-size-base: 12px;
$--color-text-regular: #333;
$--color-text-secondary: #555;

$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

カスタマイズできる変数に関しては「node_modules/element-ui/packages/theme-chalk/src/common/var.scss」を確認してください。

最後に作成したscssをmain.jsでインポートします。

main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import lang from 'element-ui/lib/locale/lang/ja';
import locale from 'element-ui/lib/locale';
import './element-variables.scss';

import App from './App.vue'

locale.use(lang)
Vue.use(ElementUI, { locale });

new Vue({
  el: '#app',
  render: h => h(App)
})