Closed do-web closed 5 years ago
scoped styles
@cesasol
Scoped style only works for element that in component.
For example, each page defines body background, styles will overwritten by the last page's css.
I also encountered the same problem,Need some help and advice
The way I managed to solve this is with dynamic page classes <nuxt :class="['layout__page', 'layout__page-' + $route.name]"/></nuxt>
.layout {
...
&__page {
&-index {
background-color: red;
}
&-second {
background-color: blue;
}
}
}
and this example corresponds to two vue files named index and demo inside the pages folders, you can also use a computed propety to transform the path or the params into a css string.
If your case is even more complex you can also use a meta middleware and combine everything, name of the route, params for the route and meta of the page wich can come from an api or user input
Seems this will be resolved with next release by the virtue of changes which @pi0 is doing
@husayt Actually not only me but the entire team, @clarkdo, and @Atinux are working on fixes :)
I actually was referring to changes around extractcss I saw you made, but yes, kudos to the whole team. I have seen the waterfall of changes coming in. Seems it's going to be the largest release since 1.0.0. All the best, guys, can't wait for that
@do-web
I have the same problem
Did you solve this ?
In nuxt-edge
you can use optimization
from webpack4
to set up your split behaviour (together with extractCss
). By default, the CSS isn't merged in one file anymore.
If this behavior is still wanted, see #3166 for a solution
This bug-report has been fixed by @manniL.
Default behavior when using
extractCSS
innuxt-edge
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
extractCSS: true, merge all css in a single css file app.css, so styles for other pages gets overwritten, please create a css file for each page.