Component style does not work

Questions
1

Hi, studying the Framework7’s documentation(Core), I got an issue in the Card component - in examples after </template> there is <style> and nothing inside this block is applied on my component. But if I add the same style code to the app.css - all works fine. Is there any solve for it?
The code of card component example:

</template>
<style>
	.demo-card-header-pic .card-header {
		height: 40vw;
		background-size: cover;
		background-position: center;
		color: #fff;
	}

	.demo-card-header-pic .card-content-padding .date {
		color: #8e8e93;
	}
</style>
2

I read this topic CSS variables in component style block. But maybe I am something missing and the resolve is exactly there, am I?

3

Update framework7-loader to latest 3.0.2

4

Hi, could you help me with updating please?

I found the page on github with necessary package. But, actually, I do not really understand how to update it manually. Is it can be done by simple changing in files package.json and package-lock.json version of framework7-loader from 3.0.1 to 3.0.2?
Or I should do something different?

5

in package.json file, framework7-loader from 3.0.1 to 3.0.2
cmd> npm i

or
cmd> npm un -D framework7-loader
cmd> npm i -D framework7-loader

1 Like
6

Have you tried scoping your style to the component? Try this:

 <style scoped>
 ...styles
7

Now it works!

Thank you so much!

8

thanks my issue has been fixed.

9

thanks alot my issue now totally fixed.