typescript import framework7 on demand. help that import css file.
framework7@5
npm i sgh5-import-plugin -D
Import global styles:
import "framework7/framework7.less"
Using plugin:
// webapck.config.js
const { createTransformFactory } = require("ts-import-f7-plugin");
module.exports = {
// ...
{
test: /\.tsx?$/,
use: [
{
loader: "awesome-typescript-loader", // or ts-loader
options: {
getCustomTransformers: (program) => ({
before: [createTransformFactory({
ignoreImportNames: [] // jump some import names, option
})],
}),
},
},
],
},
// ...
}
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);
})
// ...