gatsby-plugin-sass styles loaded as global css not as variable

here for reproduce i’m using plugin gatsby-plugin-sass

create a file with name mystyles.scss the code import styles from ‘./mystyles.scss’

console.log(styles)

result

{ }

case two in mystyles.scss create a styles

.mybutton{
backgroud:red
}

the code

import styles from './mystyles.scss'

<button className="mybutton" />

i think this a bug

mystyles.scss is loaded as global styles, background color of button with class mybutton is red,

expect no backgroud because styles as variable no imported as global like import './mystyles.scss'

here an example styles as variable

import styles from './mystyles.scss'

<button className={styles.mybutton} />

[derit]

@xBau follow this document https://www.gatsbyjs.org/packages/gatsby-plugin-sass/ and follow this https://www.gatsbyjs.org/packages/gatsby-plugin-sass/#with-css-modules

[baticodes]

@derit how did you solve the problem?

I’m having the same issue