如何在nuxt.js中按需使用mint-ui?

Question

已经通过官方文档可以实现全部加载 mint-ui，其实我只是想要几个组件，但是总提示 style.css 文件错误:

../node_modules/mint-ui/lib/font/style.css:2
@font-face {font-family: "mintui";
^

我的配置如下：

mint-ui.js

import Vue from 'vue'

import { Button } from 'mint-ui'
Vue.component(Button.name, Button)

nuxt.config.js

build: {
    vendor: [
        'mint-ui'
    ],
    babel:{
      "plugins": [["component", [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]]],
      "comments": true
    }
},
plugins: [
    { src: '~plugins/mint-ui', ssr: true }
]

类似问题：如何在nuxt.js中使用element?

Answer 1

Answer 2

1.非常开心你邀请我回答这个问题,看了下你的描述,你有没有安装 babel-plugin-component这个插件呢

Answer 3

你好我也遇到这个问题了，请问你这么解决的呢？

Answer 4

快一年了，挖个坟，不知楼主解决了没有，我的解决方法是
babel:{

"presets":[
  ["es2015",{"modules": false}]
],
"plugins":[["component",[
  {
    "libraryName":"mint-ui",
    "style": true
  }
]]],
// comments:true

},

在你代码的基础上加上 "presets" 属性设置，然后在当前文件的css属性引用样式，就可以了
css:['mint-ui/lib/style.css'],