elementui修改主題

2021-08-20 18:21:18 字數 767 閱讀 6950

新搭建乙個vue專案,使用elementui框架,當然先安裝sass

npm install sass-loader node-sass -d

接下來就是elementui的自定義的操作步驟啦

1、安裝自定義主題工具

npm install element-theme -g

2、安裝chalk主題

npm install element-theme-chalk -d

3、初始化變數檔案

et -i

結果:√ generator variables file

根目錄下生產檔案element-variables.scss

4、修改主題色

在element-variables.scss檔案裡修改$–color-primary:#6fc493(即你想要的顏色)

5、編譯主題

輸入et

結果如下:

√ build element theme

√ build theme font

根目錄會生成乙個theme的資料夾

6、引入自定義主題

main.js裡import 『../theme/index.css』

當然elementui也需要引入

7、測試

通過按鈕就可以測試是否更換了主題

type

="primary"

>主要按鈕>

修改element ui主題色

命令列主題工具 1 安裝主題工具 在自己安裝目錄下 執行 npm install element theme dev 2 安裝chalk主題 npm install element theme chalk d 3.初始化變數檔案 主題生成工具安裝成功後,如果全域性安裝可以在命令列裡通過 et 呼叫工...

element UI換主題顏色

在使用element ui進行專案開發時,使用命令列主題工具生成css檔案 的方式換膚 可以全域性安裝或者安裝在當前專案下,這裡以全域性安裝做演示。npm i element theme g初始化變數檔案 主題生成工具安裝成功後,如果全域性安裝可以在命令列裡通過 et 呼叫工具,如果安裝在當前目錄下...

element ui更換主題色

1 cd到你的專案檔案目錄下,npm i element theme g 2 npm i element theme default d 3 et i 執行後當前目錄會有乙個element variables.css檔案 4 直接編輯element variables.css檔案,修改變數 例如主題...