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


項目需求

之前項目中引用的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 vue@2.5.3
npm i vue-template-compiler@2.5.3
npm i element-ui@2.0.1

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

第一步:先安裝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覆蓋


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM