Code Monkey home page Code Monkey logo

Comments (15)

Timson020 avatar Timson020 commented on March 29, 2024 1

按照官网的介绍入门,这样的配置真的会报出这样的错误!
import 'element-ui/lib/theme-default/index.css';
就会报出引用不了,解析不了的错误!
建议 团队 尝试一下,是不是还漏了一些配置依赖?
例如其他的loader ?
我使用的是
vue init webpack-simple [projectName];
npm install element-ui@next --save-dev

from element.

jikkai avatar jikkai commented on March 29, 2024

有没有把样式文件'element-ui/lib/theme-default/index.css' import进来?

from element.

iedwin avatar iedwin commented on March 29, 2024

确实没有加进来,直接在index.html中引入吗?

from element.

jikkai avatar jikkai commented on March 29, 2024

请参考quick-start:
https://github.com/ElemeFE/element#quick-start

from element.

iedwin avatar iedwin commented on March 29, 2024
按照quick-start配置了还是不行啊。
main.js:
import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(Element)


new Vue({
  el: '#app',
  render: h => h(App)
})
.babelrc
{
  "plugins": ["xxx", ["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
  ]]]
}
Error:
ERROR in ./src/main.js
Module build failed: ReferenceError: Unknown plugin "xxx" specified in "/Users/fan/Code/Centling/Vue/edwin-hehe-2/.babelrc" at 0, attempted to resolve relative to "/Users/fan/Code/Centling/Vue/edwin-hehe-2"
    at /Users/fan/Code/Centling/Vue/edwin-hehe-2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:172:17
    at Array.map (native)
    at Function.normalisePlugins (/Users/fan/Code/Centling/Vue/edwin-hehe-2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:150:20)
    at OptionManager.mergeOptions (/Users/fan/Code/Centling/Vue/edwin-hehe-2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:224:36)
    at OptionManager.init (/Users/fan/Code/Centling/Vue/edwin-hehe-2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:338:12)
    at File.initOptions (/Users/fan/Code/Centling/Vue/edwin-hehe-2/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (/Users/fan/Code/Centling/Vue/edwin-hehe-2/node_modules/babel-core/lib/transformation/file/index.js:137:24)
    at Pipeline.transform (/Users/fan/Code/Centling/Vue/edwin-hehe-2/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/fan/Code/Centling/Vue/edwin-hehe-2/node_modules/babel-loader/index.js:38:20)
    at Object.module.exports (/Users/fan/Code/Centling/Vue/edwin-hehe-2/node_modules/babel-loader/index.js:131:12)
 @ multi main

from element.

Leopoldthecoder avatar Leopoldthecoder commented on March 29, 2024

如果不使用 babel-plugin-component 的话,不需要在 .babelrc 里做任何改动,你的 main.js 里有 import 'element-ui/lib/theme-default/index.css' 就可以了。
如果使用 babel-plugin-component,首先需要 npm i babel-plugin-component -S,其次 .babelrc 里的 xxx 代表的是其他插件,而不是一个 'xxx' 字面量。

from element.

iedwin avatar iedwin commented on March 29, 2024

我重新用vue-cli生成了一个项目,修改了main.js和App.vue;

main.js

import Vue from 'vue'
import App from './App.vue'

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

Vue.use(Element)

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue:

<template>
  <div id="app">
    <el-button>默认按钮</el-button>
   <el-button type="primary">主要按钮</el-button>
    <el-button type="text">文字按钮</el-button>
  </div>
</template>

还是会报错,说css无法读取:

ERROR in ./~/element-ui/lib/theme-default/index.css
Module parse failed: /Users/fan/Code/Centling/Vue/edwin-vue2/node_modules/element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @charset "UTF-8";.el-breadcrumb:after,.el-breadcrumb:before,.el-form-item:after,.el-form-item:before,.el-form-item__content:after,.el-form-item__content:before{display:table;content:""}.el-alert,.el-notification,.el-radio__inner{box-sizing:border-box}.el-radio,.el-radio-button__inner,.el-slider__pop,.el-switch__label{-webkit-user-select:none;-moz-user-select:none}.el-breadcrumb:after,.el-button-group:after,.el-form-item:after,.el-form-item__content:after,.el-menu:after,.el-row:after,.el-tabs__header:after{clear:both}.el-autocomplete__suggestions.is-loading li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-button-group:after,.el-button-group:before{display:table;content:""}@font-face{font-family:element-icons;src:url(fonts/element-icons.eot?t=1472440741),url(fonts/element-icons.woff?t=1472440741) format('woff'),url(fonts/element-icons.ttf?t=1472440741) format('truetype'),url(fonts/element-icons.svg?t=1472440741#el-icon) format('svg');font-weight:400;font-style:normal}[class*=" el-icon-"],[clas

from element.

iedwin avatar iedwin commented on March 29, 2024

在webpack.config.js中加入css-loader, 报了另外一个错误:

{test: /\.css$/, loader: "style!css"},

Error:

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'style' in '/Users/fan/Code/Centling/Vue/edwin-vue2'
 @ ./src/main.js 5:0-48
 @ multi main

from element.

furybean avatar furybean commented on March 29, 2024

@iedwin 感觉是没有安装 style-loader?可以执行一下 npm i style-loader --save-dev 试试。

另外,如果对 webpack 用的不是特别熟练的话,可以考虑直接使用 cooking

from element.

iedwin avatar iedwin commented on March 29, 2024

问题已解决。

  • 重新使用cooking生成vue2脚手架工程。
  • 在main.js手工导入css;
import Vue from 'vue';
import App from './app';
import Element from 'element-ui';
import 'element-ui/lib/theme-default/index.css';

Vue.use(Element);

new Vue({ // eslint-disable-line
  el: '#app',
  render: h => h(App)
});
  • tomplate中的元素必须有root element包裹;
<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="text">文字按钮</el-button>
  </div>
</template>

from element.

Leopoldthecoder avatar Leopoldthecoder commented on March 29, 2024

近期会更新文档,说明一下这个问题。

from element.

furybean avatar furybean commented on March 29, 2024

@Timson020 需要贴一下报错信息。

from element.

Timson020 avatar Timson020 commented on March 29, 2024

以下就是报错信息
VM1936:1 Uncaught Error: Module parse failed: /Users/Timson/Desktop/CASE/Vue-demo/node_modules/element-ui/lib/theme-default/index.css Unexpected character '@'

from element.

QingWei-Li avatar QingWei-Li commented on March 29, 2024

@Timson020 FAQ 第四条

from element.

Timson020 avatar Timson020 commented on March 29, 2024

@QingWei-Li
好的 看到了 感谢!
问题已经解决
webpack 2.x 好像不支持loader 这个key了 改成rules 了

from element.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.