Provides support for SASS/SCSS to Docusaurus v2 and v3.
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
).
- 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
andCSS modules
.
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'),
},
...
},
],
],
};
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>
);
}
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"]
}
}