我已经在element. element. io/theme中创建了自定义主题。拆封后你可以下载你的工作和你得到后结构和文件。
style
|
--config.json
|
--theme
|
--index.css
|
--fonts
|
--element.icons.ttf
config.json
{"global":{"$--color-primary":"#FF8063","$--color-success":"#67C23A","$--border-radius-base":"15px","$--border-radius-small":"10px","$--box-shadow-base":"0 4px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04)","$--box-shadow-light":"0 4px 12px 0 rgba(0, 0, 0, 0.1)"},"local":{"$--badge-background-color":"#FF6E4D"}}
index.css
@charset "UTF-8";.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55, 0, .1, 1);transition:all .3s cubic-bezier(.55, 0, .1, 1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55, 0, .1, 1);transition:all .3s cubic-bezier(.55, 0, .1, 1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23, 1, .32, 1),-webkit-transform .3s cubic-bezier(.23, 1, .32, 1);transition:opacity .3s cubic-bezier(.23, 1, .32, 1),-webkit-transform .3s cubic-bezier(.23, 1, .32, 1);transition:transform .3s cubic-bezier(.23, 1, .32, 1),opacity .3s cubic-bezier(.23, 1, .32, 1);transition:transform .3s cubic-bezier(.23, 1, .32, 1),opacity .3s cubic-bezier(.23, 1, .32, 1),-webkit-transform .3s cubic-bezier(.23, 1, .32, 1);-webkit-transform-origin:center top;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23, 1, .32, 1),-webkit-transform .3s cubic-bezier(.23, 1, .32, 1);transition:opacity .3s cubic-bezier(.23, 1, .32, 1),-webkit-transform .3s cubic-bezier(.23, 1, .32, 1);transition:transform .3s cubic-bezier(.23, 1, .32, 1),opacity .3s cubic-bezier(.23, 1, .32, 1);transition:transform .3s cubic-bezier(.23, 1, .32, 1),opacity .3s cubic-bezier(.23, 1, .32, 1),-webkit-transform .3s cubic-bezier(.23, 1, .32, 1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23, 1, .32, 1),-webkit-transform .3s cubic-bezier(.23, 1, .32, 1);transition:opacity .3s cubic-bezier(.23, 1, .32, 1),-webkit-transform .3s cubic-bezier(.23, 1, .32, 1);transition:transform .3s cubic-bezier(.23, 1, .32, 1),opacity .3s cubic-bezier(.23, 1, .32, 1);transition:transform .3s cubic-bezier(.23, 1, .32, 1),opacity .3s cubic-bezier(.23, 1, .32, 1),-webkit-transform .3s cubic-bezier(.23, 1, .32, 1);-webkit-transform-origin:top left;transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}.horizontal-collapse-transition{-webkit-transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out;transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out}.el-list-enter-active,.el-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);...
很抱歉代码的格式，它基本上是纯css。
我的问题是:我如何将这个主题应用到我的应用程序，因为不幸的是没有关于该主题的文档。在nuext .config.js中有一个全局css配置，还有一个样式文件夹和资产文件夹。如果我把代码放在那里-我怎么让它工作?
这就是我所经历的，没有找到我一直在寻找的答案:
如何添加自定义主题元素ui在下一步?
element-ui-use-default-theme
也有新版本的Element-UI/theme，但也不是很有帮助。
我在Element的v.2中使用了v. 3的文档。
我只是去了我的nuxt.config.js，删除了默认主题，并将其替换为index.css的路径，如下所示:
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
// 'element-ui/lib/theme-chalk/index.css', // comment out
'assets/style/theme/index.css', // add
],
这样我的风格效果很好。希望可以帮助你们。