[SOLVED] How to link/import css to index.html 😅

Questions
1

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">

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

Sorry Didn’t work either :frowning_face:
maybe I should use rollup.js

4

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

5

First I create cordova project & then installed framework7 through npm

6

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

7

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
8

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

1 Like
9

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

1 Like