1.引入css代码
import 'element-ui/lib/theme-chalk/index.css';
2.报错信息
./node_modules/element-ui/lib/theme-chalk/index.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";.el-pagination--small .arrow.disabled,.el-table .hidden-columns,.el-table td.is-hidden>*,.el-table th.is-hidden>*,.el-table--hidden{visibility:hidden}.el-input__suffix,.el-tree.is-dragging
3.报错原因,没有loader处理vue的css文件,导致css文件内容没被解析
4.解决:在webpack配置里面加上如下信息
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
二、引入element-ui报错
1.引入vue代码
import ElementUI from 'element-ui';
Vue.use(ElementUI);
2.报错信息
"export 'default' (imported as 'ElementUI') was not found in 'element-ui'
3.解决
babel.config.js文件的plugins去除’plugin-transform-runtime‘这个插件
三、引入Message组件每次刷新页面都会展示一个弹窗
1.引入代码
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
import {Message} from 'element-ui'
Vue.use(Message)
Vue.prototype.$message = Message
2.解决:改写成如下写法即可
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
import { Message } from 'element-ui';
Vue.component(Message.name, Message);
Vue.prototype.$message = Message;