How to include react-scoped-css in a gatsby project?

Question

Im developing a website using gatsby.js and want to scope my styles to avoid global class name clashes between my react components. I started to use css modules but I would prefer to use the react-scoped-css package as it allows you to remain using string based classnames.

I can only find instuctions for how to use react-scoped-css with a create-react-app setup, but I want to include this package within my gatsby project. Could someone tell me how to add this package as a gatsby plugin?

Answer 1

I think you are looking for gatsby-plugin-sass-scoped. To use it by default (without options) just add it in your gatsby-config.js:

plugins: [`gatsby-plugin-sass-scoped`]

Then import the scoped CSS (SCSS) file with the .scoped notation:

import("./component/index.scoped.scss")

Disclaimer

There are a lot of missing details and configurations in the question and since this is not an official package it may be discontinued or incompatible with your current Gatsby version or its dependencies. If so, consider using --legacy-peer-deps flag when installing.