Search code examples
reactjssassgatsbyserver-side-renderinggatsby-plugin

SCSS doesn't load on Gatsby

i try to load the SASS for my Gatsby Project but if I check the source code of the web there isn't any classes from my sass. I am a bit confused and I followed the documentation of Gatsby. Nothing worked so my last chance is SO.

// gatsby-config.js
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-fontawesome-css',
'gatsby-plugin-sass',
{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'assets',
    path: `${__dirname}/static/`,
  },
 },
]

Here I import the style.

/**
 * Add browser relation logic.
 */
require('./style/global.js');
import './style/sass/index.scss';

I followed the gatsby-plugin-sass documentation and I should be all set. After restarting the server and show source-code of my app there is now class name from my sass file.

Best Regards Knome

Solution

  • I didn't integrate in any component. Because if I see the Source code of chrome then there should be scss be loaded.

    Ok, well... The SCSS is loaded as it should but the styles are not applied to any component because you've not set any class name.

    Just do:

    const IndexPage =()=>{

   return <div className="grid-container">I'm your index page</div>
}

    Like any other HTML element.