使用バージョン
element-ui 2.4.8
ElementUIの基本的な使用方法は下記も参考にしてください。
Vue CLI を使用している場合はwebpack.config.jsを編集してscssファイルを読み込めるように編集します。
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」をインポートします。
$--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でインポートします。
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)})

