sgh5-import-plugin

typescript import framework7 on demand. help that import css file.

Requirements

framework7@5

Usage

npm i sgh5-import-plugin -D

Import global styles:

import "framework7/framework7.less"

Using plugin:

// webapck.config.js
const { ComponentsTransformFactory } = require("ts-import-f7-plugin");
module.exports = {
    // ...
    {
        test: /\.tsx?$/,
        use: [
            {
            loader: "awesome-typescript-loader", // or ts-loader
            options: {
                getCustomTransformers: (program) => ({
                    before: [ComponentsTransformFactory],
                }),
            },
            },
        ],
    },
    // ...
}

before:

import { f7Input } from "@/lib/framework7/vue/framework7-vue.esm";
import DialogComponent, {
  Dialog,
} from "framework7/components/dialog/dialog";
  // ...
  this.$f7ready(async (f7) => {
    await f7.loadModules(DialogComponent);
  })
  // ...

after:

import { f7Input } from "framework7-vue";
import DialogComponent, {
  Dialog,
} from "framework7/components/dialog/dialog";

import "framework7/components/input.css";
import "framework7/components/dialog.css";
  // ...
  this.$f7ready(async (f7) => {
    await f7.loadModules(DialogComponent);
  })
  // ...