vuejs2 - 将元素ui导入nuxt时出现样式错误

Question

我正在尝试将元素 UI 导入 Nuxt.js 并在他们的 Twitter 帐户上链接到故障（https://glitch.com/edit/#!/nuxt-element-ui?path=layouts/default.vue:1 :0 ) 列出了重要文件。在你的 default.vue 中列出了这个

<template>
  <div>
    <nuxt/>
  </div>
</template>

<style src="element-ui/lib/theme-default/index.css"></style>

我通过运行将元素 ui 导入到我的 nuxt 项目中：

 npm i element-ui --save nuxt

在文件夹中搜索 index.css 并将该链接作为源复制粘贴到 default.vue 文件的样式 src (node_modules\element-ui\lib\theme-chalk\index.css)，但出现错误它无法找到它。

我还尝试使用 element ui 网站上的 cdn 样式文件：

https://unpkg.com/element-ui/lib/theme-chalk/index.css

它们都导致“找不到模块”

我究竟做错了什么？任何其他地方都列出了如何将元素 ui 导入 nuxt？

score 0 · Accepted Answer

在您的样式中，您可以像这样导入它：

<style>
  @import '~element-ui/lib/theme-default/index.css'
</style>

但您也可以直接从您的 javascript 导入它：

import 'element-ui/lib/theme-default/index.css';

score 0 · Accepted Answer

全局 CSS 应该css在nuxt.config

例如

module.exports = {
  css: [
    { src: '~/assets/index.css', lang: 'scss' },
  ],
｝

CDN 样式表应该定义在head.links

  head: {
    link: [
      { rel: 'stylesheet', href: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' },
    ],
  },

读：

2 回答 2