文章/答案/技术大牛

发布

社区首页 >问答首页 >将元素ui导入nuxt时出现样式错误

问将元素ui导入nuxt时出现样式错误
EN

Stack Overflow用户

提问于 2018-08-09 11:51:33

回答 2查看 1.4K关注 0票数 1

我正在尝试将element UI导入Nuxt.js，在他们的twitter账户上，他们链接到glitch (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文件的样式源(node_modules\element-ui\lib\theme-chalk\index.css)中，但我收到一个错误，它找不到它。

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

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

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

我做错了什么？还有没有其他地方列出了如何将元素ui导入nuxt？

vuejs2

nuxt.js

element-ui

回答 2

Stack Overflow用户

发布于 2018-08-09 14:05:39

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

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

但是你也可以直接从你的javascript导入：

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

票数 0

Stack Overflow用户

发布于 2018-08-09 14:15:24

全局CSS应该在nuxt.config的css部分中定义

例如：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51758552

复制

相似问题

问将元素ui导入nuxt时出现样式错误
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将元素ui导入nuxt时出现样式错误EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将元素ui导入nuxt时出现样式错误
EN