[SOLVED] How to link/import css to index.html ๐Ÿ˜…

I hope all of you are good in this pandemic period :grinning:

  1. index.html
    like this one

  2. app.js

import Framework7 from 'framework7/framework7.esm.bundle'
import Dom7 from 'dom7
var $$ = Dom7;
var app = new Framework7({...})

  1. ISSUE :speaking_head:
    how to add/import/link css files from node_module :question:

  2. what iโ€™ve tried before:
    a) In app.js :page_facing_up: (didnโ€™t worked) :frowning_face:

import style from โ€˜framework7/css/framework7.bundle.cssโ€™

b) In index.html(inside head tag) :page_facing_up: (didnโ€™t worked) :frowning_face:

<link rel="stylesheet" href="./../node_modules/framework7/css/framework7.bundle.css">

// Import Framework7 Styles
import 'framework7/css/framework7.bundle.css';
1 Like

Sorry Didnโ€™t work either :frowning_face:
maybe I should use rollup.js

It should work. Since its the way to import the style. How did you initialize your project? Manually or via cli?

First I create cordova project & then installed framework7 through npm

also iโ€™ve installed rollup.js and required plugin as they documented (plugin-node-resolve)
app is initializing :grapes: BUT for css, the rollup shows error

Can you use the cli? You can start a f7+ cordova project in 5minutes. All set up. Also the import styles.

https://framework7.io/cli/

1 Like

Sounds well !!! :rocket: giving a try to cli. you are always helpful

1 Like

You need to use bundler that supports importing CSS files (like webpack or rollup with plugings for CSS imports)

1 Like