VueCli3打包后Vant样式丢失
程序员文章站
2022-06-13 15:18:52
...
在vuecli3中使用了vant,配置vant的按需引入,
因为项目还使用了typescript,所以配置参考官网,下载ts-import-plugin和webpack-merge,具体配置(vue.config.js)如下:
const merge = require("webpack-merge");
const tsImportPluginFactory = require("ts-import-plugin");
module.exports = {
lintOnSave: true,
chainWebpack: config => {
config.module
.rule("ts")
.use("ts-loader")
.tap(options => {
options = merge(options, {
transpileOnly: true,
getCustomTransformers: () => ({
before: [
tsImportPluginFactory({
libraryName: "vant",
libraryDirectory: "es",
style: true
})
]
}),
compilerOptions: {
module: "es2015"
}
});
return options;
});
}
};
接着可以在代码(main.ts)中引入组件
import { Button } from 'vant'
Vue.use(Button)
进行到这里,就可以进行开发了
<van-button type="default">默认按钮</van-button>
问题:
这样按需引入组件在开发中没有任何问题,可是打包的时候,只打包了自定义的样式,vant组件的样式没有打包
解决:
在配置文件中,加入配置(parallel: false,),完整配置如下:
const merge = require("webpack-merge");
const tsImportPluginFactory = require("ts-import-plugin");
module.exports = {
parallel: false,
lintOnSave: true,
chainWebpack: config => {
config.module
.rule("ts")
.use("ts-loader")
.tap(options => {
options = merge(options, {
transpileOnly: true,
getCustomTransformers: () => ({
before: [
tsImportPluginFactory({
libraryName: "vant",
libraryDirectory: "es",
style: true
})
]
}),
compilerOptions: {
module: "es2015"
}
});
return options;
});
}
};