Comments (15)
按照官网的介绍入门,这样的配置真的会报出这样的错误!
import 'element-ui/lib/theme-default/index.css';
就会报出引用不了,解析不了的错误!
建议 团队 尝试一下,是不是还漏了一些配置依赖?
例如其他的loader ?
我使用的是
vue init webpack-simple [projectName];
npm install element-ui@next --save-dev
from element.
有没有把样式文件'element-ui/lib/theme-default/index.css' import进来?
from element.
确实没有加进来,直接在index.html中引入吗?
from element.
请参考quick-start:
https://github.com/ElemeFE/element#quick-start
from element.
按照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.
如果不使用 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.
我重新用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.
在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.
@iedwin 感觉是没有安装 style-loader?可以执行一下 npm i style-loader --save-dev
试试。
另外,如果对 webpack 用的不是特别熟练的话,可以考虑直接使用 cooking 。
from element.
问题已解决。
- 重新使用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.
近期会更新文档,说明一下这个问题。
from element.
@Timson020 需要贴一下报错信息。
from element.
以下就是报错信息
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.
@Timson020 FAQ 第四条
from element.
@QingWei-Li
好的 看到了 感谢!
问题已经解决
webpack 2.x 好像不支持loader 这个key了 改成rules 了
from element.
Related Issues (20)
- [Bug Report] 网页缩放后,el-table show-overflow-tooltip ,原本无tooltip的短内容也展示了tooltip,且没有附加缩略符号
- [Bug Report] win11下,el-upload多选不能鼠标一次框选多个 HOT 2
- [Bug Report] date-picker组件显示异常
- [Feature Request] 能否给date-picker的cell增加一个slot
- [Bug Report] el-time-picker is-range selectableRange设置时间范围options失效
- [Bug Report] 自定义主题服务报错 HOT 2
- [Bug Report] el-date-picker组件使用format格式化为中文单位时,下拉选择日期时间时显示有bug HOT 1
- [Bug Report] transfer 穿梭框,左边选中数据传到右边,怎么展示在右边panel最上边, 同理,右边选中数据传到左边,怎么展示在左边panel最上边?
- [Bug Report] element-ui的table组件,伸缩列缩到一起后,右侧操作列冻结列会有斑马纹断掉,而且操作列那一列会多出一列空列
- [Feature Request] 级联面板(el-cascader-panel)没有搜索功能?
- [Bug Report] el-date-picker component drop-down box content duplication problem
- [Bug Report] 在 el-date-picker 日期时间范围选择器中存在一个问题:在手动输入日期时间后,更改时间时会出现时分秒被禁用的情况。 HOT 1
- [Bug Report] el-tree 点击小三角时无法加载子节点动态数据
- [Bug Report] Select component on iOS intercepts the focus
- [Feature Request] 期望el-cascader filterable开启后搜索的结果展示提供slot HOT 1
- [Bug Report] 主题功能 Server Error 500 HOT 5
- [Feature Request] el-table-column的prop属性能否支持数组类型?Can the prop attribute of el-table-column support array type?
- [Bug Report] 树形表格和展开行不能一起使用吗?
- [Feature Request] Uploader Support for Folder selection with webkitdirectory attribute
- [Bug Report] select框设置filterable,在选中一个之后切屏,再切回来,组件的options会自动打开 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from element.