Ошибка стиля при импорте элемента ui в nuxt

Я пытаюсь импортировать пользовательский интерфейс элемента в 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 в папке и скопировал эту ссылку в качестве источника в стиль src (node_modules \ element-ui \ lib \ theme-chalk \ index.css) для файла default.vue, но я получаю сообщение об ошибке что он не может его найти.

Я также попытался использовать файл стиля cdn с веб-сайта element ui:

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

Оба они приводят к "Модуль не найден"

Что я делаю неправильно? В любом другом месте, где есть что-нибудь о том, как импортировать элемент ui в nuxt?


nuxt.js vuejs2 element-ui
person Bruce Mathers    schedule 09.08.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Глобальный CSS должен быть определен в css разделе nuxt.config

e.g.

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' },
    ],
  },

Читать:

https://nuxtjs.org/api/configuration-css

https://nuxtjs.org/api/configuration-head

person William Chong    schedule 09.08.2018
comment
Спасибо за ссылки и примеры. Я все еще немного запутался. Даже с начальной загрузкой мне не удалось установить его через CDN (я все время получаю сообщение об ошибке). Я перешел на head.link и заменил href, который вы предоставили с загрузочным CDN, и это не удалось. В отличие от Angular, вы не можете просто использовать bootstrap или element, вставив CDN в заголовок, верно? - person Bruce Mathers; 23.08.2018

arrow_upward
0
arrow_downward

Внутри своего стиля вы можете импортировать его так:

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

Но вы также можете импортировать его прямо из вашего javascript:

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

person Julian Paolo Dayag    schedule 09.08.2018