Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nuxt如何设置babel-plugin-import #347

Closed
ckaock opened this issue Sep 6, 2019 · 9 comments
Closed

nuxt如何设置babel-plugin-import #347

ckaock opened this issue Sep 6, 2019 · 9 comments

Comments

@ckaock
Copy link

ckaock commented Sep 6, 2019

nuxt使用ui组件ant-design-vue,其他包都使用的最新版,尝试设置less-loader 和css-loader,都无法加载css或者报错。尝试了一天,无果。

@iiDestiny
Copy link

@sorrycc 遇到同样的问题,有好多人说解决了,其实他们只是引入了所有的压缩 css。

@gaga-change
Copy link

遇到同样的问题,研究了一下午,无果。

@afc163
Copy link
Contributor

afc163 commented Dec 19, 2019

不需要用 babel-plugin-import 了,antd 和 webpack 现在都能支持 tree shaking。

@gp0320
Copy link

gp0320 commented Dec 25, 2019

我最近也在用nuxt, 按需加载我试了搞定了,你们试下我的方法,
花了我一天一夜的工夫,看了源码。
https://juejin.im/post/5e012778518825127f085da8

@lvreninfo
Copy link

build: {
transpile: ['ant-design-vue'],
babel: {
plugins: [
['import', {
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: 'css'
}, 'ant-design-vue']
]
}
}

@agrozyme
Copy link

我拿一個只有單個 page 的專案來比較,就結論來說,其總大小為

  • 有按須加載: 3.75MB
  • 無按須加載: 4.17MB
    沒用按須加載的大了 11% 左右,但從絕對大小來看,我個人不覺得有太大差異~

這個案子沒有自訂 components
用到的 components 有

{
    'a-page-header': PageHeader,
    'a-button': Button,
    'a-popover': Popover,
    'a-icon': Icon,
    'a-tag': Tag,
    'a-modal': Modal,
    'a-spin': Spin,
    'a-alert': Alert,
    'a-tabs': Tabs,
    'a-tab-pane': Tabs.TabPane,
    'a-list': List,
    'a-list-item': List.Item,
    'a-list-item-meta': List.Item.Meta,
    'a-divider': Divider,
    'a-form-model': FormModel,
    'a-form-model-item': FormModel.Item,
    'a-cascader': Cascader,
    'a-input': Input,
    'a-radio': Radio,
    'a-radio-group': Radio.Group
}

@xiaofuliang
Copy link

请问题解决了吗?求解决方案

@gp0320
Copy link

gp0320 commented Dec 21, 2020

请问题解决了吗?求解决方案

build: {
// 添加这个是关键,添加后babel才会处理依赖包vant里面的代码
transpile: [ /vant.*?less/ ],

babel: {
  plugins: [
    ['import', {
      libraryName: 'vant',
      "style": (name) => {
        return `${name}/style/less.js`
      }
    }, 'vant']
  ],
},

}

@ckaock ckaock closed this as completed Dec 21, 2020
@cluyun
Copy link

cluyun commented Feb 13, 2021

我最近也在用nuxt, 按需加载我试了搞定了,你们试下我的方法,
花了我一天一夜的工夫,看了源码。
https://juejin.im/post/5e012778518825127f085da8

这又不是ant-design

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants