From c05cb75cbc72993863b50df5865740aebb4f6c9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ram=C3=B3n=20Lamana?= <rlamana@gmail.com>
Date: Mon, 23 Mar 2020 18:13:28 +0100
Subject: [PATCH] docs(v2): add sass/scss under the styling section (#2423)

---
 website/docs/styling-layout.md | 72 ++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md
index c24be0a17e..becd8d1560 100644
--- a/website/docs/styling-layout.md
+++ b/website/docs/styling-layout.md
@@ -131,3 +131,75 @@ The class names which will be processed by webpack into a globally unique class
 _This section is a work in progress._ [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640).\_
 
 :::
+
+### Sass/SCSS
+
+To use Sass/SCSS as your CSS preprocessor, install the unofficial Docusaurus 2 plugin [`docusaurus-plugin-sass`](https://github.com/rlamana/docusaurus-plugin-sass). This plugin works for both global styles and the CSS modules approach:
+
+1. Install [`docusaurus-plugin-sass`](https://github.com/rlamana/docusaurus-plugin-sass):
+
+```bash npm2yarn
+npm install --save docusaurus-plugin-sass
+```
+
+2. Include the plugin in your `docusaurus.config.js` file:
+
+```jsx {4}
+// docusaurus.config.js
+module.exports = {
+  ...
+  plugins: ['docusaurus-plugin-sass'],
+  ...
+}
+```
+
+3. Write and import your stylesheets in Sass/SCSS as normal.
+
+#### Global styles using Sass/SCSS
+
+You can now set the `customCss` property of `@docusaurus/preset-classic` to point to your Sass/SCSS file:
+
+```jsx {9}
+// docusaurus.config.js
+module.exports = {
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        ...
+        theme: {
+          customCss: require.resolve('./src/css/custom.scss'),
+        },
+        ...
+      },
+    ],
+  ],
+};
+```
+
+#### Modules using Sass/SCSS
+
+Name your stylesheet files with the `.module.scss` suffix (e.g. `welcome.module.scss`) instead of `.css`. Webpack will use `sass-loader` to preprocess your stylesheets and load them as CSS modules.
+
+```scss
+/* styles.module.scss */
+.main {
+  padding: 12px;
+
+  article {
+    color: #ccc;
+  }
+}
+```
+
+```javascript
+import styles from './styles.module.scss';
+
+function MyComponent() {
+  return (
+    <main className={styles.main}>
+      <article>Lorem Ipsum</article>
+    </main>
+  );
+}
+```