2018年10月23日(火)

Vue.jsのコンポーネントライブラリElementUIのテーマファイル作成方法

• 0
• 0
• 0
• 2

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...