Skip to content

Commit

Permalink
docs(v2): add sass/scss in docs under the styling section
Browse files Browse the repository at this point in the history
  • Loading branch information
rlamana committed Mar 18, 2020
1 parent 51995fa commit 92b828f
Showing 1 changed file with 72 additions and 0 deletions.
72 changes: 72 additions & 0 deletions website/docs/styling-layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
```

0 comments on commit 92b828f

Please sign in to comment.