How do I make Gatsby + netlify website work on my machine?

I deployed an app with netlify + gatsby default options and then I cloned that repo, so I can edit the style. The problem is that it doesn't work on my machine, the following error persists:

    2 problems (0 errors, 2 warnings)


ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


$black: #2b2523;
               ^
      Invalid CSS after "...black: #2b2523;": expected 1 selector or at-rule,
was ".navbar .navbar-men"
      in /Users/micazev/Documents/ecominimalismo.com/src/components/all.sass
(line 11, column 17)

File: src/components/all.sass

failed Building development bundle - 22.833s
 ERROR  Failed to compile with 1 errors                                 14:39:49
⠀
 error  in ./src/components/all.sass
⠀
Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/sass-loader/dist/cjs.js):

$black: #2b2523;
               ^
      Invalid CSS after "...black: #2b2523;": expected 1 selector or at-rule,
was ".navbar .navbar-men"
      in /Users/micazev/Documents/ecominimalismo.com/src/components/all.sass
(line 11, column 17)
    at /Users/micazev/Documents/ecominimalismo.com/node_modules/webpack/lib/Norm
alModule.js:316:20
    at /Users/micazev/Documents/ecominimalismo.com/node_modules/loader-runner/li
b/LoaderRunner.js:367:11
    at /Users/micazev/Documents/ecominimalismo.com/node_modules/loader-runner/li
b/LoaderRunner.js:233:18
    at context.callback (/Users/micazev/Documents/ecominimalismo.com/node_module
s/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.callback (/Users/micazev/Documents/ecominimalismo.com/node_modules
/sass-loader/dist/index.js:89:7)
    at Object.done [as callback] (/Users/micazev/Documents/ecominimalismo.com/no
de_modules/neo-async/async.js:8069:18)
    at options.error (/Users/micazev/Documents/ecominimalismo.com/node_modules/n
ode-sass/lib/index.js:294:32)

 @ ./src/components/Layout.js 17:0-20
 @ ./src/templates/blog-post.js
 @ ./src/cms/preview-templates/BlogPostPreview.js
 @ ./src/cms/cms.js
 @ multi ./node_modules/gatsby-plugin-netlify-cms/cms.js
./node_modules/gatsby-plugin-netlify-cms/cms-identity.js ./src/cms/cms.js

My repo is: https://github.com/micazev/ecominimalismo.com

I don't know what other info I could give. Please, help.

Solution

According to some threads about that starter, there's a bug about the Sass loaders that causes this issue. You have many solutions provided in this GitHub thread:

Add options to the gatsby-plugin-sass:
```
{
  resolve: 'gatsby-plugin-sass',
  options: {
      indentedSyntax: true
    }
}
```
This will allow the loader to understand the indented syntax of Sass.
Changing the extension from .sass to .scss, changing also all the references in the project: you'll need to add semicolons (;) and braces ({}) when needed.

Obviously, the second one is easier and safer.