vue主題變色方法

新建乙個樣式檔案，例如 element-variables.scss，寫入以下內容：

/* 改變主題色變數 */
$--color-primary: teal;
/* 改變 icon 字型路徑變數，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

之後，在專案的入口檔案中，直接引入以上樣式檔案即可（無需引入 element 編譯好的 css 檔案）：

import vue from 'vue'
import element from 'element-ui'
import './element-variables.scss'
vue.use(element)

需要注意的是，覆蓋字型路徑變數是必需的，將其賦值為 element 中 icon 圖示所在的相對路徑即可。

命令列主題工具

安裝工具

首先安裝「主題生成工具」，可以全域性安裝或者安裝在當前專案下，推薦安裝在專案裡，方便別人 clone 專案時能直接安裝依賴並啟動，這裡以全域性安裝做演示。

npm i element-theme -g

安裝白堊主題，可以從 npm 安裝或者從 github 拉取最新**。

從 npm npm i element-theme-chalk -d 從 github

npm i -d

初始化變數檔案

主題生成工具安裝成功後，如果全域性安裝可以在命令列裡通過 et 呼叫工具，如果安裝在當前目錄下，需要通過 node_modules/.bin/et 訪問到命令。執行 -i 初始化變數檔案。預設輸出到 element-variables.scss，當然你可以傳引數指定檔案輸出目錄。

et -i [可以自定義變數檔案]

✔ generator variables file

如果使用預設配置，執行後當前目錄會有乙個 element-variables.scss 檔案。內部包含了主題所用到的所有變數，它們使用 scss 的格式定義。大致結構如下：

$--color-primary: #409eff !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;
...

修改變數

直接編輯 element-variables.scss 檔案，例如修改主題色為紅色。

$--color-primary: red;

編譯主題

儲存檔案後，到命令列裡執行 et 編譯主題，如果你想啟用 watch 模式，實時編譯主題，增加 -w 引數；如果你在初始化時指定了自定義變數檔案，則需要增加 -c 引數，並帶上你的變數檔名

et

✔ build theme font

✔ build element theme

引入自定義主題

預設情況下編譯的主題目錄是放在 ./theme 下，你可以通過 -o 引數指定打包目錄。像引入預設主題一樣，在**裡直接引用 theme/index.css 檔案即可。

import '../theme/index.css'
import elementui from 'element-ui'
import vue from 'vue'
vue.use(elementui)

搭配外掛程式按需引入元件主題

如果是搭配 babel-plugin-component 一起使用，只需要修改 .babelrc 的配置，指定 stylelibraryname 路徑為自定義主題相對於 .babelrc 的路徑，注意要加 ~。


]]]}

~為伺服器根目錄

vue主題變色方法

vue實現點選變色陣列的坑

vue 實現主題換膚 element ui

vue 實現主題換膚 element ui

vue主題變色方法

vue實現點選變色 陣列的坑

vue 實現主題換膚 element ui

vue 實現主題換膚 element ui

相關推薦

vue實現點選變色陣列的坑