1. 程式人生 > >自定義element-ui主題,修改樣式

自定義element-ui主題,修改樣式

改版 引入 一個 css template div 應用 根據 得到

項目需求

之前項目中引用的select選框有bug,所以需要改動,考慮到還有許多需求,果斷將餓了麽組件全移過來

安裝element-ui2.0.1版本

安裝完之後,我就將element-ui的組件應用上,然後編譯的時候報錯了。就是el-ipt找不到一類的錯誤,查了查資料,說是版本不一致,element-ui2.0的版本需要升級vue的版本,如下解決辦法:
更改版本 把vue 和 vue-template-compiler 都更新到了2.5.3版本
npm remove # 卸載某個版本
npm remove vue
npm remove vue-template-compiler
npm i [email protected]
npm i [email protected]
npm i [email protected]

根據官網步驟來自定義主題

第一步:先安裝npm i element-theme ,這裏起先我裝的是全局的,然後一直報錯,就換成了項目中安裝
第二步:npm i element-theme-chalk -D 更新組件
接下來就是et -i ,沒有看清官網上寫的就直接打上了,結果報錯。原因是項目中安裝的主題需要通過node_modules/.bin/et 訪問到命令
執行後當前目錄會有一個 element-variables.scss 文件
接下來就是在文件裏修改變量內容了。

生成引入修改後的css文件

命令行裏輸入 node_modules/.bin/et 然後得到css文件,最後在main.js中引入即可。
另外,有一些裏面不能同意修改的css,我選擇在外面另外寫css覆蓋

自定義element-ui主題,修改樣式