Meteor/Vue/Framework7: No style being used

Question

I am using Framework7 with meteor and vue and I have included framework7 like this in my main.js:

import { Meteor } from 'meteor/meteor';
import { createApp } from 'vue';
import { VueMeteor } from 'vue-meteor-tracker';
import App from './App.vue';
import { router } from './router';
import Framework7 from 'framework7/lite-bundle';
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';
Framework7.use(Framework7Vue);
const app = createApp(App);
registerComponents(app);

Meteor.startup(() => {
  app.use(router);
  app.use(VueMeteor);
  app.mount('#app');
});

Unfortunately, the web page being rendered has no kind of framework7 control styling. I even included the css in the main.html file like this:

<link rel="stylesheet" href="./.node_modules/Framework7/framework-bundle.css">

EDIT 1: Step-by-step description of failure

• Meteor project running with vue
• install framework7 with npm i framework7
• install framework7-vue with npm i framework7-vue
• added import 'framework7/framework7-bundle.css (checked for its existance in node_modules folder) to main.js ==> Error is thrown: [vite] Internal server error: Missing "./framework7-bundle.css" export in "framework7" package

What am I doing wrong?

Thanks

Answer 1

You have to include the style from a style tag in your main Vue file.

For example, you have your main Vue file named App.vue in the root folder :

You can define the following tag in it :

<style lang="css">
@import 'framework7/css/bundle';
</style>

This will load the framework7 bundle css into your own app.css file and inject it as style stylesheet.

What I usually do (working in scss) is creating a main.scss file which will contain global style of my vue app in a css folder, and declare in my App.vue the following :

<style lang="scss">
@import 'css/main';
</style>

And in the css/main.scss file :

@import 'mynodemodule/path_to_my_css.css';

EDIT

That kind of syntax should also work (in main.js) (depending of which version of framework7 is used and file location inside framework7 node_module) according to package.json exports section of framework7 to get the bundle.css file :

// Import F7 Styles
import 'framework7/css/bundle';

EDIT 2

Another solution based on vue.js documentation that should fix your syntax is to declare the css src like this

<!-- import a file from the installed "todomvc-app-css" npm package -->
<style src="todomvc-app-css/index.css" />

That would give the following :

<!-- import a file from the installed "framework7" npm package -->
<style src="framework7/css/bundle" />

But this syntax doesn't work for me.