cssvue.jssassgridsome

How do I specify different background colours for different pages in Gridsome/vue.js?

How do I specify different background colours for different pages in Gridsome/vue.js? I've tried scoping the css but it won't work for the body or html selectors.

Solution

  • html and body are outside the application bounds. You will want to programatically control these elements.

    Two simple avenues come to mind:

    1. Use the layouts approach which will work with or without scoped CSS.
    2. Manipulate the body classList using navigation guards.