vue3.x+mintui项目不能按需引入以及导入mint-ui/lib/style.css失败问题

安装mintui

npm i mint-ui -S

按需引入:

1.npm install babel-plugin-component -D
2.修改.babelrc文件:
{
“presets”: [
[“es2015”, { “modules”: false }]
],
“plugins”: [[“component”, [
{
“libraryName”: “mint-ui”,
“style”: true
}
]]]
}

注意:是在原有的配置下加入,不是删除原来的代码 如下图vue3.x+mintui项目不能按需引入以及导入mint-ui/lib/style.css失败问题_第1张图片

安装babel-preset-es2015:

npm install babel-preset-es2015 --save-dev
注意:不安装它会报错Couldn’t find preset “es2015” relative to directory
一般情况下到此一步时已经可以运行了。
下图按需引入了Header,然后还引入了css文件跑起来的效果:
vue3.x+mintui项目不能按需引入以及导入mint-ui/lib/style.css失败问题_第2张图片
vue3.x+mintui项目不能按需引入以及导入mint-ui/lib/style.css失败问题_第3张图片
vue3.x+mintui项目不能按需引入以及导入mint-ui/lib/style.css失败问题_第4张图片

我之前建立了个项目根据此步骤执行但是遇到import mint-ui/lib/style.css 失败情况下面是我对此解决的方法

1.修改webpack.base.conf.js文件,在其内加入
{

test: /\.css$/,

include: [

/src/,
‘/node_modules/mint-ui/lib/’

],

loader: "style!css"

}

2.我在网上看见有的博主说是在

test: /.js$/,
loader: ‘babel-loader’,
include: [resolve(‘src’), resolve(‘test’), resolve(‘node_modules/webpack-dev-server/client’)]

  }
  加入:
  query:{
     presets:['es2015']
     }
    
    但是我用了步骤1然后注释掉:
      query:{
     presets:['es2015']
     }
     依然可以跑起来。
     以上我的踩坑笔记,希望对你们有所帮助!!!

你可能感兴趣的:(vue+mintUI)