配置按需加载组件和样式 quasar.conf.js

module.exports = configure(function (ctx) {
  return {
    // https://v2.quasar.dev/quasar-cli/supporting-ts
    supportTS: {
      tsLoaderConfig: {
        transpileOnly: true,
        getCustomTransformers: () => ({
          before: [
            tsImportPluginFactory({
              libraryName: "vant",
              libraryDirectory: "lib",
              // style: () => `vant/lib/index.css`,
              style: (name) => `${name}/style/less.js`,
            }),
          ],
        }),
        compilerOptions: {
          module: "es2015",
        },
      },
    },
    // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
    build: {
      transpile: true,
      transpileDependencies: [/vant.*?less/],
    },
  };
});

配置自适应 .postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = (ctx) => {
  // 设计稿宽度
  let vwUnit = 750;
  if (/node_modules\/(vant|quasar)/.test(ctx.file)) {
    vwUnit = 375;
    // if (/node_modules\/(vant)/.test(ctx.file)) {
    //   console.log(ctx.file);
    // }
  }
  return {
    plugins: [
      // to edit target browsers: use "browserslist" field in package.json
      require("autoprefixer"),
      // 默认小于等于1px的值不会被转换。建议使用vant提供的hairline样式
      require("@ttou/postcss-px-to-viewport")({
        viewportWidth: vwUnit,
        // exclude: /node_modules\/quasar/, // 如果不想转换vant等第三方组件，则开启exclude选项
        // exclude: /node_modules\/vant/ // 如果不想转换vant等第三方组件，则开启exclude选项
        // selectorBlackList: ['van-'] // 这样子也可以不转换vant组件样式，但项目内覆盖vant样式的代码也不会被转换
      }),
    ],
  };
};

written by panhezeng \\ tags: JavaScript