Issue with importing css

I’m trying to import rtl css in app.js.

import "framework7/framework7-bundle-rtl.min.css";

And this is the error I’m getting.

[plugin:vite:import-analysis] Missing "./framework7-bundle-rtl.min.css" export in "framework7" package

If I copy framework7-bundle-rtl.min.css in src directory then it all works fine with import statement. What am I doing wrong?

Also is it possible to conditionally load CSS? I’m using i18n with 2 languages and the default language will be english. But if user switches the language then I want to import rtl CSS. I tried this.

if (i18n.global.locale === "ur") {
    import "framework7-bundle-rtl.min.css";
}

But it’s throwing this error.

An import declaration can only be used at the top level of a module

Any help would be appreciated.

Thanks

Which version of Framework7 are you using?

I’m using framework7 v7.0.5

import 'framework7/css/bundle/rtl';
2 Likes