Nuxt.jsでElementUIのテーマをカスタマイズする

3097 ワード
nuxt.js ElementUI nuxt.js テキストリンク

概要

ElementUIをNuxt.jsに導入して開発を進めていると、テーマカラーの変更をおこないたくなった。
（参考： Nuxt.jsとElementUIを組み合わせて使う）

ElementUIの設定まわりの手順は公式ドキュメントにまとまっているが、Nuxt.jsに組み込む場合の手順をまとめておく。
http://element-cn.eleme.io/#/en-US/component/custom-theme

事前準備：Sassをコンパイルできるようにする

すでにSass/Scssを利用している場合は不要だが、まだの場合はinstallする

yarn add -D node-sass sass-loader

or

npm install --save-dev node-sass sass-loader

カスタム設定の読み込み

/css/element-ui.scss　を配置し、

/* theme color */
$--color-primary: teal;

/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

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

/nuxt.config.js に読み込み設定を追加する

module.exports = {
  build: {
    vendor: ['element-ui']
  },
  plugins: [
    '@/plugins/element-ui'
  ],
  css: [
    '@/css/element-ui.scss'
  ],
}

この際、element-ui/lib/theme-chalk/index.css の設定が残っている場合は不要になるので削除する。

あとは、/css/element-ui.scss を修正していけば、
自由にElementUIの設定をカスタマイズすることが可能