Move adding a sass stylesheet to its own file

Author: selbekk

docusaurus/docs/adding-a-sass-stylesheet.md

@@ -0,0 +1,34 @@
+---
+id: adding-a-sass-stylesheet
+title: Adding a Sass Stylesheet
+---
+
+> Note: this feature is available with `[email protected]` and higher.
+
+Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a `.Button` CSS class in `<AcceptButton>` and `<RejectButton>` components, we recommend creating a `<Button>` component with its own `.Button` styles, that both `<AcceptButton>` and `<RejectButton>` can render (but [not inherit](https://facebook.github.io/react/docs/composition-vs-inheritance.html)).
+
+Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable.
+
+To use Sass, first install `node-sass`:
+
+```bash
+$ npm install node-sass --save
+$ # or
+$ yarn add node-sass
+```
+
+Now you can rename `src/App.css` to `src/App.scss` and update `src/App.js` to import `src/App.scss`.
+This file and any other file will be automatically compiled if imported with the extension `.scss` or `.sass`.
+
+To share variables between Sass files, you can use Sass imports. For example, `src/App.scss` and other component style files could include `@import "./shared.scss";` with variable definitions.
+
+This will allow you to do imports like
+
+```scss
+@import 'styles/_colors.scss'; // assuming a styles directory under src/
+@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) too!
+
+> **Note:** You must prefix imports from `node_modules` with `~` as displayed above.

docusaurus/docs/user-guide.md

@@ -11,7 +11,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
 
 ## Table of Contents
 
-- [Adding a Sass Stylesheet](#adding-a-sass-stylesheet)
 - [Post-Processing CSS](#post-processing-css)
 - [Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
 - [Adding SVGs](#adding-svgs)
@@ -45,38 +44,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Advanced Configuration](#advanced-configuration)
 - [Alternatives to Ejecting](#alternatives-to-ejecting)
 
-## Adding a Sass Stylesheet
-
-> Note: this feature is available with `[email protected]` and higher.
-
-Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a `.Button` CSS class in `<AcceptButton>` and `<RejectButton>` components, we recommend creating a `<Button>` component with its own `.Button` styles, that both `<AcceptButton>` and `<RejectButton>` can render (but [not inherit](https://facebook.github.io/react/docs/composition-vs-inheritance.html)).
-
-Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable.
-
-To use Sass, first install `node-sass`:
-
-```bash
-$ npm install node-sass --save
-$ # or
-$ yarn add node-sass
-```
-
-Now you can rename `src/App.css` to `src/App.scss` and update `src/App.js` to import `src/App.scss`.
-This file and any other file will be automatically compiled if imported with the extension `.scss` or `.sass`.
-
-To share variables between Sass files, you can use Sass imports. For example, `src/App.scss` and other component style files could include `@import "./shared.scss";` with variable definitions.
-
-This will allow you to do imports like
-
-```scss
-@import 'styles/_colors.scss'; // assuming a styles directory under src/
-@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) too!
-
-> **Note:** You must prefix imports from `node_modules` with `~` as displayed above.
-
 ## Post-Processing CSS
 
 This project setup minifies your CSS and adds vendor prefixes to it automatically through [Autoprefixer](https://github.com/postcss/autoprefixer) so you don’t need to worry about it.

docusaurus/website/sidebars.json

@@ -22,7 +22,8 @@
       "importing-a-component",
       "code-splitting",
       "adding-a-stylesheet",
-      "adding-a-css-modules-stylesheet"
+      "adding-a-css-modules-stylesheet",
+      "adding-a-sass-stylesheet"
     ],
     "Testing": ["running-tests", "debugging-tests"],
     "Deployment": ["publishing-components-to-npm", "deployment"],