How do I make Gatsby + netlify website work on my machine? - node.js

Question

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.

Answer 1

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.