May 28

配置按需加载组件和样式 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

©panhezeng for 阿潘道, 2006-2021. 原文地址:https://apsay.com/2021/05/28/the-quasar-framework-uses-the-vant-ui/
本文遵循署名-非商业性使用共享协议,转载请注明。

Leave a Reply

Me

点这和我talk,panhezeng@gmail.com
https://github.com/panhezeng