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) })