查找依赖包,发现element-ui/lib中并没有发现style.css文件,但是在使用的时候总是隐式加载了style.css文件,导致编译报错
解决方式:把全局引入更换为局部引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先安装:
npm install babel-plugin-component -D
然后,将 .babelrc 修改为:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
如果有多个按需加载的时候可以以数组的形式传入,如:
{
"presets": [
"es2015", "stage-2"
],
"plugins": [
"transform-runtime",
"transform-es2015-shorthand-properties",
[
"component",
[
{
"libraryName": "mint-ui",
"style": true
},
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
]
}
如下:
按需加载Progress
main.js
import {Progress} from 'element-ui';
Vue.use(Progress);
在对应的页面中使用
<el-progress :percentage="50"></el-progress>