欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VueCli3打包后Vant样式丢失

程序员文章站 2022-06-13 15:18:52
...

在vuecli3中使用了vant,配置vant的按需引入,

因为项目还使用了typescript,所以配置参考官网,下载ts-import-pluginwebpack-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;
      });
  }
};