ericwindmill / gatsby-starter-docs

A GatsbyJS starter made for documentation sites.

Gatsby Docs Starter 1.0

This Project was forked from Gatsby Advanced Starter

A starter skeleton with advanced features for Gatsby.

Developed for creating Documentation or Tutorial websites.

Demo

This template provides everything but the content. You could just write all your lessons in markdown files, configure a few lines of code, and have a completely built documentation website.

Changelog

Updated 3/17/18

• Updated Table of Contents system:
  • You now define your table of contents in the 'table_of_contents.json' file under the 'content' folder.
  • The GraphQl query in your 'lesson' template should match your table_of_contents.
  • The TableOfContents component does the rest.

This requires more upfront work, but I've found it to be infinitely better when your page count gets high. It's easier to move things around and have the ToC just work.

For a more complicated example, you can look at the repo for the site I built this for: Flutter By Example/

• Basic styling added to the 'post' template
• Mobile responsive

Features

New Features

• Basic UI
• Styled Components CSS w/ ThemeProvider for easy cross-site UI changes.
• Custom code-highlight theme
• React Icons
• Configured to auto generate documentation 'Table of Contents'
• You can also have blog posts.

Updates

• December 23, 2017 - The 'Docs' page is now mobile responsive.

These are the features from Gatsby Advanced Starter, which remain:

• Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
• Separate components for everything
• High configurability:
  • User information
  • User social profiles
  • Copyright information
  • More!
• Author segment
  • Name
  • Location
  • Description
  • Links
  • Follow Me button
• Posts in Markdown
  • Code syntax highlighting
  • Embed YouTube videos
  • Embed Tweets
• Tags
  • Separate page for posts under each tag
• Categories
  • Separate page for posts under each category
• Disqus support
  • Notifications about new disqus comments
• Google Analytics support
• NPM scripts for GitHub Pages deployment
• Social features
  • Twitter tweet button
  • Facebook share/share count
  • Reddit share/share count
  • Google+ share button
  • LinkedIn share button
  • Telegram share button
• SEO
  • Sitemap generation
  • robots.txt
  • General description tags
  • Schema.org JSONLD (Google Rich Snippets)
  • OpenGraph Tags (Facebook/Google+/Pinterest)
  • Twitter Tags (Twitter Cards)
• RSS feeds
• Loading progress for slow networks
• Offline support
• Web App Manifest support
• Development tools
  • ESLint for linting
  • Prettier for code style
  • Remark-Lint for linting Markdown
  • write-good for linting English prose
  • gh-pages for deploying to GitHub pages
  • CodeClimate configuration file and badge

---

Notes

Ruben Harutyunyan did most of the hard work with Gatsby Advanced Starter. The rest of the credit is due to Gatsby.

WARNING: Make sure to edit static/robots.txt to include your domain for the sitemap!

gatsby-starter-docs's Issues

Release

Can we have a release for 1.0.0? Would be great because the current patch is broken.

Prettier is not applied to files

The script npm run format only targets pure javascript files (aka *.js) but the source contains only .jsx files.

Image Issues

Hey @ericwindmill
Trying to setup gatsby for a site documentation, using your boilerplate. It seems that images are not working (referred in markdown). Can you please see why this is happening ?

Markdown - Code Block Section

I've been working on adding markdown pages to this starter and noticed that code blocks are being generated at the top of the pages, under the title. I can't think of anything I've changed that may have caused this?

Slow Compilation Time

The console gives no indication of why, but the compilation time of site is incredibly slow.

success createLayouts — 0.017 s
success createPages — 0.041 s
success createPagesStatefully — 0.009 s
success extract queries from components — 0.199 s
success run graphql queries — 0.709 s
success write out page data — 0.002 s
success update schema — 0.237 s

info bootstrap finished - 3.504 s

 DONE  Compiled successfully in 63420ms

Question: How do you run stylelint?

I see that that stylelint is a devDependency here, but I cannot figure out how it get's run... What am I missing?

Thanks for the sweet starter pack! 🥂

install fails because sharp does not build

See below:

$ node --version
v11.15.0
$ yarn --version
1.17.3
$ gatsby --version
Gatsby CLI version: 2.7.40
$ gatsby new gatsby-starter-docs https://github.com/ericwindmill/gatsby-starter-docs
info Creating new site from git: https://github.com/ericwindmill/gatsby-starter-docs.git

Cloning into 'gatsby-starter-docs'...
remote: Enumerating objects: 699, done.
remote: Total 699 (delta 0), reused 0 (delta 0), pack-reused 699
Receiving objects: 100% (699/699), 1.09 MiB | 1.48 MiB/s, done.
success Created starter directory layout
info Installing packages...

yarn install v1.17.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "gatsby > [email protected]" has incorrect peer dependency "graphql@^0.10.0".
warning "gatsby > [email protected]" has incorrect peer dependency "graphql@^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0-b || ^0.9.0 || ^0.10.0".
warning "gatsby > [email protected]" has unmet peer dependency "caniuse-db@^1.0.30000652".
warning " > [email protected]" has unmet peer dependency "babel-plugin-styled-components@>1.5.0".
warning "react-icons > [email protected]" has unmet peer dependency "prop-types@*".
[4/4] Building fresh packages...
[1/3] ⡀ uws
[-/3] ⡀ waiting...
error /home/gback/gatsby-starter-docs/node_modules/sharp: Command failed.
Exit code: 1
Command: node-gyp rebuild
Arguments: 
Directory: /home/gback/gatsby-starter-docs/node_modules/sharp
Output:
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp info find Python using Python version 2.7.15 found at "/usr/bin/python"
gyp info spawn /usr/bin/python
gyp info spawn args [ '/usr/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/home/gback/gatsby-starter-docs/node_modules/sharp/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/usr/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/home/gback/.cache/node-gyp/11.15.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/home/gback/.cache/node-gyp/11.15.0',
gyp info spawn args   '-Dnode_gyp_dir=/usr/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/home/gback/.cache/node-gyp/11.15.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/home/gback/gatsby-starter-docs/node_modules/sharp',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.' ]
gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
make: Entering directory '/home/gback/gatsby-starter-docs/node_modules/sharp/build'
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
In file included from ../../nan/nan.h:192:0,
                 from ../src/common.cc:22:
../../nan/nan_maybe_43_inl.h: In function ‘Nan::Maybe<bool> Nan::ForceSet(v8::Local<v8::Object>, v8::Local<v8::Value>, v8::Local<v8::Value>, v8::PropertyAttribute)’:
../../nan/nan_maybe_43_inl.h:112:15: error: ‘class v8::Object’ has no member named ‘ForceSet’
   return obj->ForceSet(isolate->GetCurrentContext(), key, value, attribs);
               ^~~~~~~~
In file included from ../../nan/nan_new.h:189:0,
                 from ../../nan/nan.h:198,
                 from ../src/common.cc:22:
../../nan/nan_implementation_12_inl.h: In static member function ‘static Nan::imp::FactoryBase<v8::StringObject>::return_t Nan::imp::Factory<v8::StringObject>::New(v8::Local<v8::String>)’:
../../nan/nan_implementation_12_inl.h:337:37: warning: ‘static v8::Local<v8::Value> v8::StringObject::New(v8::Local<v8::String>)’ is deprecated: Use Isolate* version [-Wdeprecated-declarations]
   return v8::StringObject::New(value).As<v8::StringObject>();
                                     ^
In file included from /home/gback/.cache/node-gyp/11.15.0/include/node/v8.h:26:0,
                 from /home/gback/.cache/node-gyp/11.15.0/include/node/node.h:63,
                 from ../src/common.cc:20:
/home/gback/.cache/node-gyp/11.15.0/include/node/v8.h:5242:37: note: declared here
                 static Local<Value> New(Local<String> value));
                                     ^
/home/gback/.cache/node-gyp/11.15.0/include/node/v8config.h:326:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^~~~~~~~~~
In file included from ../src/common.cc:22:0:
../../nan/nan.h: In function ‘v8::Local<v8::Value> Nan::MakeCallback(v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*)’:
../../nan/nan.h:835:60: warning: ‘v8::Local<v8::Value> node::MakeCallback(v8::Isolate*, v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*)’ is deprecated: Use MakeCallback(..., async_context) [-Wdeprecated-declarations]
         v8::Isolate::GetCurrent(), target, func, argc, argv);
                                                            ^
In file included from ../src/common.cc:20:0:
/home/gback/.cache/node-gyp/11.15.0/include/node/node.h:174:50: note: declared here
                 NODE_EXTERN v8::Local<v8::Value> MakeCallback(
                                                  ^
/home/gback/.cache/node-gyp/11.15.0/include/node/node.h:93:42: note: in definition of macro ‘NODE_DEPRECATED’
     __attribute__((deprecated(message))) declarator
                                          ^~~~~~~~~~
In file included from ../src/common.cc:22:0:
../../nan/nan.h: In function ‘v8::Local<v8::Value> Nan::MakeCallback(v8::Local<v8::Object>, v8::Local<v8::String>, int, v8::Local<v8::Value>*)’:
../../nan/nan.h:850:62: warning: ‘v8::Local<v8::Value> node::MakeCallback(v8::Isolate*, v8::Local<v8::Object>, v8::Local<v8::String>, int, v8::Local<v8::Value>*)’ is deprecated: Use MakeCallback(..., async_context) [-Wdeprecated-declarations]
         v8::Isolate::GetCurrent(), target, symbol, argc, argv);
                                                              ^
In file included from ../src/common.cc:20:0:
/home/gback/.cache/node-gyp/11.15.0/include/node/node.h:167:50: note: declared here
                 NODE_EXTERN v8::Local<v8::Value> MakeCallback(
                                                  ^
/home/gback/.cache/node-gyp/11.15.0/include/node/node.h:93:42: note: in definition of macro ‘NODE_DEPRECATED’
     __attribute__((deprecated(message))) declarator
                                          ^~~~~~~~~~
In file included from ../src/common.cc:22:0:
../../nan/nan.h: In function ‘v8::Local<v8::Value> Nan::MakeCallback(v8::Local<v8::Object>, const char*, int, v8::Local<v8::Value>*)’:
../../nan/nan.h:865:62: warning: ‘v8::Local<v8::Value> node::MakeCallback(v8::Isolate*, v8::Local<v8::Object>, const char*, int, v8::Local<v8::Value>*)’ is deprecated: Use MakeCallback(..., async_context) [-Wdeprecated-declarations]
         v8::Isolate::GetCurrent(), target, method, argc, argv);
                                                              ^
In file included from ../src/common.cc:20:0:
/home/gback/.cache/node-gyp/11.15.0/include/node/node.h:160:50: note: declared here
                 NODE_EXTERN v8::Local<v8::Value> MakeCallback(
                                                  ^
/home/gback/.cache/node-gyp/11.15.0/include/node/node.h:93:42: note: in definition of macro ‘NODE_DEPRECATED’
     __attribute__((deprecated(message))) declarator
                                          ^~~~~~~~~~
In file included from ../src/common.cc:22:0:
../../nan/nan.h: In constructor ‘Nan::Utf8String::Utf8String(v8::Local<v8::Value>)’:
../../nan/nan.h:911:53: warning: ‘v8::Local<v8::String> v8::Value::ToString() const’ is deprecated: Use maybe version [-Wdeprecated-declarations]
       v8::Local<v8::String> string = from->ToString();
                                                     ^
In file included from /home/gback/.cache/node-gyp/11.15.0/include/node/node.h:63:0,
                 from ../src/common.cc:20:
/home/gback/.cache/node-gyp/11.15.0/include/node/v8.h:10251:15: note: declared here
 Local<String> Value::ToString() const {
               ^~~~~
In file included from ../src/common.cc:22:0:
../../nan/nan.h:921:74: warning: ‘int v8::String::WriteUtf8(char*, int, int*, int) const’ is deprecated: Use Isolate* version [-Wdeprecated-declarations]
         length_ = string->WriteUtf8(str_, static_cast<int>(len), 0, flags);
                                                                          ^
In file included from /home/gback/.cache/node-gyp/11.15.0/include/node/v8.h:26:0,
                 from /home/gback/.cache/node-gyp/11.15.0/include/node/node.h:63,
                 from ../src/common.cc:20:
/home/gback/.cache/node-gyp/11.15.0/include/node/v8.h:2754:21: note: declared here
                 int WriteUtf8(char* buffer, int length = -1,
                     ^
/home/gback/.cache/node-gyp/11.15.0/include/node/v8config.h:326:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^~~~~~~~~~
In file included from ../src/common.cc:22:0:
../../nan/nan.h: In member function ‘v8::Local<v8::Value> Nan::Callback::Call_(v8::Isolate*, v8::Local<v8::Object>, int, v8::Local<v8::Value>*) const’:
../../nan/nan.h:1479:5: warning: ‘v8::Local<v8::Value> node::MakeCallback(v8::Isolate*, v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*)’ is deprecated: Use MakeCallback(..., async_context) [-Wdeprecated-declarations]
     ));
     ^
In file included from ../src/common.cc:20:0:
/home/gback/.cache/node-gyp/11.15.0/include/node/node.h:174:50: note: declared here
                 NODE_EXTERN v8::Local<v8::Value> MakeCallback(
                                                  ^
/home/gback/.cache/node-gyp/11.15.0/include/node/node.h:93:42: note: in definition of macro ‘NODE_DEPRECATED’
     __attribute__((deprecated(message))) declarator
                                          ^~~~~~~~~~
../src/common.cc: In function ‘std::tuple<int, int> sharp::CalculateCrop(int, int, int, int, int)’:
../src/common.cc:392:13: warning: this statement may fall through [-Wimplicit-fallthrough=]
         top = inHeight - outHeight;
         ~~~~^~~~~~~~~~~~~~~~~~~~~~
../src/common.cc:393:7: note: here
       case 7:
       ^~~~
sharp.target.mk:125: recipe for target 'Release/obj.target/sharp/src/common.o' failed
make: *** [Release/obj.target/sharp/src/common.o] Error 1
make: Leaving directory '/home/gback/gatsby-starter-docs/node_modules/sharp/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:196:23)
gyp ERR! stack     at ChildProcess.emit (events.js:193:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:255:12)
gyp ERR! System Linux 4.15.0-58-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/gback/gatsby-starter-docs/node_modules/sharp
gyp ERR! node -v v11.15.0
gyp ERR! node-gyp -v v5.0.3


 ERROR 

Command failed: yarnpkg



  Error: Command failed: yarnpkg
  
  - index.js:174 makeError
    [lib]/[gatsby]/[gatsby-cli]/[execa]/index.js:174:9
  
  - index.js:278 Promise.all.then.arr
    [lib]/[gatsby]/[gatsby-cli]/[execa]/index.js:278:16
  
  - task_queues.js:86 processTicksAndRejections
    internal/process/task_queues.js:86:5

Prettier not applied to all javascript files

Prettier is not applied to the .js files at the root.

Algolia search integration

Hey guys. I guess everyone can do that manually but would be cool if algolia free search would be available already built-in!
There is already a plugin for that.

Thanks for the template.

The code is not "pretty"

Running npm run format:js on latest master creates a huge diff. It should create no diff.

Header jumps

When navigating from "HOME" to "DOCS" in the demo, the links in the header jump a little down and up again if one navigates back. CSS issue.

Remove all unused and unnecessary code.

The codebase contains a lot of confusing code that is not used / not maintained. It should be removed to create less confusion for new users.

Decrease build time

Build takes somewhat long. Maybe that is not necessary. We could investigate and see whether one can fix it. See also #1

Blog posts - no list, view is unstyled

I see a whole implementation you did for ./content/posts but there isn't a list of posts anywhere, and when I've tried browsing to https://localhost:8000/post-one/ I got an awkward page with no styling.

Linting fails

f2bee01 makes the linting script npm run lint fail. Needs to be fixed.

Table of contents items persist and duplicate

I'm having an issue with lessons in the table of contents list. When new lessons are created, deleted or renamed, I end up with duplicates and ghost listings.

To reproduce:

1. Build the starter
   gatsby new gatsby-starter-docs https://github.com/ericwindmill/gatsby-starter-docs

2. Duplicate a lesson and rename, e.g. lesson_five.md, then increment the lesson and chapter numbers in frontmatter

3. Delete a lesson, e.g. lesson_two.md

Outcome:

Thoughts:

• There is a warning about keys in the list items for TableOfContents.jsx
  

I tried to add keys but still had duplicate posts

< li key={Math.random()}>

and

<li key={node.title()}>

• I disabled offline access, but still had ghost listings

There is a relevant reference in Readme:

Configured to auto generate documentation 'Table of Contents' - you just need to follow the file frontmatter conventions in the 'lessons' folder.

Are there any additional conventions or settings to consider?

Remove all traces of stylelint

There are some traces of stylelint in this repo creating the impression that stylelint is used in the project when apparently it is not.

I guess this is a leftover from the starter this starter was forked from. In order to avoid this kind of question in the future, all mention of stylelint should be purged from the source.
@levino #5 (comment)

Add linter check via CI for PRs

I already added a configuration file for circleci. So far circleci does not run the content because it is not configured. Only admins of this repo can configure circleci to run it.

To do so go to circleci and create an account or sign in (with github preferably).

Then go to "add project" like here:

And then you should be able to start building the project where it says for me "contact admin"

I also recommend making the circleci script return an exit code of zero (aka passing) a requirement for things to get merged in.

NPM install results in 720(!!) vulnerabilities.

I mean, I use Gatsby to generate static files so it doesn't really matter but Jesus, this is by far the highest vulnerability count I've seen so far.

added 2151 packages from 1166 contributors and audited 29719 packages in 343.651s
found 720 vulnerabilities (603 low, 94 moderate, 21 high, 2 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

The Gatsby tutorial repos have like 3-5 vulnerabilities.

How can we fix this?

Question: How to prevent component re-rendering while routing?

HI @ericwindmill ,

I have tried to use my custom react component inside the left side pane, but while routing the custom component re-rendered. Can you please let me know how to prevent this behavior from my custom component or any other settings need to configure? Also can you let me know where the routing handled in this starters?

Thanks in advance...

Use single quotes and no semicolon.

Just a suggestion:

Lets change the code style rules to singlequotes and no trailing semicolons. So this

import yada from "yada";

becomes this

import yada from 'yada'

To achive this, one just has to add a file to the root called .prettierrc with the following content

semi: false
singleQuote: true

Then prettier will do the rest.

Update to Gatsby v2

Could you update this project to Gatsby v2? I'm trying, but I'm don't having success in this task

Renaming lessons breaks build

I've been trying to rename the lessons but it seems that it breaks the build.

Am I missing something obvious? do they have to remain named lesson_n.md?

I've stashed my changes in branch brokengatsby here https://github.com/unofficialoraclecloudhub/oracledb-graphql-demo/tree/brokengatsby/docs

the new directory structure given below & I've updated
table_of_contents.json
and SiteConfig.js

content
├── lessons
│   ├── lesson_five.md
│   ├── lesson_four.md
│   ├── lesson_one.md
│   ├── lesson_six.md
│   ├── lesson_three.md
│   ├── run_locally_with_docker.md
│   └── table_of_contents.json
└── posts
    └── post_one.md

running gatsby develop --verbose returns the below to the console

verbose 2.428 set gatsby_log_level: "verbose"
verbose 2.434 set gatsby_executing_command: "develop"
verbose 2.439 loading local command from: /Users/SBlack4/Git/oracledb-graphql-demo/docs/node_modules/gatsby/dist/commands/develop.js
verbose 12.68 running command: develop
success delete html and css files from previous builds — 0.014 s
success open and validate gatsby-config.js — 0.019 s
success copy gatsby files — 0.044 s
success onPreBootstrap — 2.010 s
success source and transform nodes — 0.110 s
success building schema — 1.496 s
success createLayouts — 0.019 s
success createPages — 0.064 s
success createPagesStatefully — 0.031 s
success onPreExtractQueries — 0.001 s
success update schema — 0.207 s
GraphQL Error Field "entry" must not have a selection since type "String" has no subfields.

  file: /Users/SBlack4/Git/oracledb-graphql-demo/docs/src/templates/lesson.jsx

  24 |               }
  25 |               frontmatter {
  26 |                 title
  27 |               }
  28 |             }
  29 |           }
  30 |         }
  31 |         chapters {
  32 |           title
  33 |           entries {
> 34 |             entry {
     |                   ^
  35 |               id
  36 |               childMarkdownRemark {
  37 |                 fields {
  38 |                   slug
  39 |                 }
  40 |                 frontmatter {
  41 |                   title
  42 |                 }
  43 |               }
  44 |             }

success extract queries from components — 0.104 s
success run graphql queries — 0.021 s
success write out page data — 0.010 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 17.47 s

 DONE  Compiled successfully in 51962ms                                                                                                                                                             15:09:48


You can now view gatsby-docs-starter in the browser.

  http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

 WAIT  Compiling...                                                                                                                                                                                 15:09:49

 DONE  Compiled successfully in 505ms              

and renders and error page in the browser

×
TypeError: Cannot read property 'allMarkdown' of undefined
Index.render
src/pages/index.jsx:12
   9 | 
  10 | class Index extends React.Component {
  11 |   render() {
> 12 |     const allSEOMarkdown = this.props.data.allMarkdown.edges
  13 | 
  14 |     return (
  15 |       <div className="index-container">
View compiled
▶ 49 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Multi-TOC or separation of TOC out

Haven't looked into it much but does anyone have a solution for larger documentation sites it could get unwieldy to use a single JSON file, my guess is I'd need to off-load this to an external service or somehow use a nested structure where the TOC.json would be under it's respective directory or something.

Question: Are CSS Preprocessors (SASS/LESS) supported ???

Hi @ericwindmill,

Is CSS Preprossors such as SASS and LESS available??? I tried using but the build failed since no appropriate loaders are available.

Code:

import React, { Component } from "react";
import './about.scss'
class About extends Component {
  render() {
    return (
      <div className="about">
        <h1>
          Edit About component or pages/about.jsx to include your information.
        </h1>
      </div>
    );
  }
}

export default About;

Error: