Nefarious Plastic Mannequins

    docusaurus-plugin-sass

    0.2.2 • Public • Published

    docusaurus-plugin-sass

    Provides support for SASS/SCSS to Docusaurus v2.

    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

    1. Include the plugin in your docusaurus.config.js file.
    // docusaurus.config.js
    module.exports = {
      ...
    + plugins: ['docusaurus-plugin-sass'],
      ...
    }
    1. 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>
      );
    }

    Install

    npm i docusaurus-plugin-sass

    DownloadsWeekly Downloads

    6,441

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    4.39 kB

    Total Files

    7

    Last publish

    Collaborators

    • rlamana