From ae4a9495740bb048c3fd8fb81a4c37f0c7510a56 Mon Sep 17 00:00:00 2001
From: Jayant Bhawal <bhawal.jayant@gmail.com>
Date: Wed, 28 Nov 2018 12:46:37 +0530
Subject: [PATCH] Add SASS_PATH instructions to Sass stylesheet docs

A bunch of issues popped up with people asking how to have SASS/SCSS imports the way the would expect normally.
Turns out `node-sass` supports the SASS_PATH variable that we can use. This PR adds that to the documentation.
---
 docusaurus/docs/adding-a-sass-stylesheet.md | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/docusaurus/docs/adding-a-sass-stylesheet.md b/docusaurus/docs/adding-a-sass-stylesheet.md
index ac095c2136e..90d3012eb1a 100644
--- a/docusaurus/docs/adding-a-sass-stylesheet.md
+++ b/docusaurus/docs/adding-a-sass-stylesheet.md
@@ -30,10 +30,20 @@ This will allow you to do imports like
 @import '~nprogress/nprogress'; // importing a css file from the nprogress node module
 ```
 
-> **Tip:** You can opt into using this feature with [CSS modules](adding-a-css-modules-stylesheet.md) too!
-
 > **Note:** You must prefix imports from `node_modules` with `~` as displayed above.
 
+`node-sass` also supports the `SASS_PATH` variable.
+
+To use imports relative to a path you specify, and from `node_modules` without adding the `~` prefix, you can add a [`.env` file](https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/adding-custom-environment-variables.md#adding-development-environment-variables-in-env) at the project root with the variable `SASS_PATH=node_modules:src`. To specify more directories you can add them to `SASS_PATH` separated by a `:` like `path1:path2:path3`.
+
+If you set `SASS_PATH=node_modules:src`, this will allow you to do imports like
+```scss
+@import 'styles/colors'; // assuming a styles directory under src/, where _colors.scss partial file exists.
+@import 'nprogress/nprogress'; // importing a css file from the nprogress node module
+```
+
+> **Tip:** You can opt into using this feature with [CSS modules](adding-a-css-modules-stylesheet.md) too!
+
 > **Note:** If you're using Flow, override the [module.file_ext](https://flow.org/en/docs/config/options/#toc-module-file-ext-string) setting in your `.flowconfig` so it'll recognize `.sass` or `.scss` files. You will also need to include the `module.file_ext` default settings for `.js`, `.jsx`, `.mjs` and `.json` files.
 >
 > ```