Nuxt.js: extractCSS problem

[do-web]

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.

_{This question is available on Nuxt.js community (#c2253)}

[cesasol]

scoped styles

[binggg]

@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.

[hankanon]

I also encountered the same problem，Need some help and advice

[cesasol]

The way I managed to solve this is with dynamic page classes <nuxt :class="['layout__page', 'layout__page-' + $route.name]"/></nuxt>

``` scss
.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

[husayt]

Seems this will be resolved with next release by the virtue of changes which @pi0 is doing

[pi0]

@husayt Actually not only me but the entire team, @clarkdo, and @Atinux are working on fixes :)

[husayt]

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

[setLylToxlx]

@do-web
I have the same problem
Did you solve this ?

[manniL]

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

[cmty[bot]]

This bug-report has been fixed by @manniL.

Default behavior when using extractCSS in nuxt-edge

[lock[bot]]

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.