docusaurus-plugin-sass

docusaurus-plugin-sass

Provides support for SASS/SCSS to Docusaurus v2 and v3.

Note: this plugin is compatible with Docusaurus Faster

Installation

yarn add docusaurus-plugin-sass sass

sass-loader requires you to install either Dart Sass or Node Sass on your own (more documentation can be found at sass-loader).

How to use

• Include the plugin in your docusaurus.config.js file.

// docusaurus.config.js
module.exports = {
  ...
+ plugins: ['docusaurus-plugin-sass'],
  ...
}

• Write and import your stylesheets in Sass/SCSS as normal for both global styles and CSS modules.

Global styles

Assuming you are using @docusaurus/preset-classic (or @docusaurus/theme-classic), you can set the customCss property to point to yous Sass/SCSS file:

// docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        ...
        theme: {
          customCss: require.resolve('./src/css/custom.scss'),
        },
        ...
      },
    ],
  ],
};

Sass/SCSS modules

To style your components using modules, name your stylesheet files with the .module.scss suffix (e.g. welcome.module.scss). Webpack will load such files as CSS modules and you have to reference the class names from the imported CSS module (as opposed to using plain strings). This is similar to the convention used in Create React App.

/* styles.module.scss */
.main {
  padding: 12px;

  article {
    color: #ccc;
  }
}

import styles from './styles.module.scss';

function MyComponent() {
  return (
    <main className={styles.main}>
      <article>Lorem Ipsum</article>
    </main>
  );
}

TypeScript support

To enable TypeScript support for Sass/SCSS modules, the TypeScript configuration should be updated to add the docusaurus-plugin-sass type definitions. This can be done in the tsconfig.json file:

{
  "extends": "@tsconfig/docusaurus/tsconfig.json",
  "compilerOptions": {
    ...
+    "types": ["docusaurus-plugin-sass"]
  }
}