如何使用 Nuxt.js 在 Element-UI 中使用自定义主题？

Question

我在element.eleme.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。

我的问题是：我如何将这个主题应用到我的应用程序中，因为很遗憾没有关于该主题的文档。 nuxt.config.js中有nuxt全局css配置，还有styles文件夹和assets文件夹。如果我把代码放在那里 - 我如何让它工作？

这是我经历的，但没有找到我正在寻找的答案：

How to add custom theme to element-ui in nuxt?

element-ui-use-default-theme

还有更新版本的Element-UI/theme，但也不是很有帮助。

Answer 1

我在 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
  ],

这样我的样式效果很好。希望对你们中的一些人有所帮助。