Have ideas to improve npm?Join in the discussion! »

    @atlea/next-sass

    1.0.0 • Public • Published

    Next.js + Sass

    Import .sass or .scss files in your Next.js project

    Installation

    npm install --save @atlea/next-sass node-sass
    

    or

    yarn add @atlea/next-sass node-sass
    

    Usage

    The stylesheet is compiled to .next/static/css. Next.js will automatically add the css file to the HTML. In production a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.

    Without CSS modules

    Create a next.config.js in your project

    // next.config.js
    const withSass = require('@atlea/next-sass')
    module.exports = withSass({
      /* config options here */
    })

    Create a Sass file styles.scss

    $font-size: 50px;
    .example {
      font-size: $font-size;
    }

    Create a page file pages/index.js

    import "../styles.scss"
     
    export default () => <div className="example">Hello World!</div>

    With CSS modules

    // next.config.js
    const withSass = require('@atlea/next-sass')
    module.exports = withSass({
      cssModules: true
    })

    Create a Sass file styles.scss

    $font-size: 50px;
    .example {
      font-size: $font-size;
    }

    Create a page file pages/index.js

    import css from "../styles.scss"
     
    export default () => <div className={css.example}>Hello World!</div>

    With CSS modules and options

    You can also pass a list of options to the css-loader by passing an object called cssLoaderOptions.

    For instance, to enable locally scoped CSS modules, you can write:

    // next.config.js
    const withSass = require('@atlea/next-sass')
    module.exports = withSass({
      cssModules: true,
      cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
      }
    })

    Create a SCSS file style.scss

    .example {
      font-size: 50px;
    }

    Create a page file pages/index.js that imports your stylesheet and uses the hashed class name from the stylesheet

    import css from "../style.scss"
     
    const Component = props => {
      return (
        <div className={css.example}>
          ...
        </div>
      )
    }
     
    export default Component

    Your exported HTML will then reflect locally scoped CSS class names.

    For a list of supported options, refer to the webpack css-loader README.

    With SASS loader options

    You can pass options from node-sass

    // next.config.js
    const withSass = require('@atlea/next-sass')
    module.exports = withSass({
      sassLoaderOptions: {
        includePaths: ["absolute/path/a", "absolute/path/b"]
      }
    })

    PostCSS plugins

    Create a next.config.js in your project

    // next.config.js
    const withSass = require('@atlea/next-sass')
    module.exports = withSass({
      /* config options here */
    })

    Create a postcss.config.js

    module.exports = {
      plugins: {
        // Illustrational
        'postcss-css-variables': {}
      }
    }

    Create a CSS file styles.scss the CSS here is using the css-variables postcss plugin.

    :root {
      --some-color: red;
    }
     
    .example {
      /* red */
      color: var(--some-color);
    }

    When postcss.config.js is not found postcss-loader will not be added and will not cause overhead.

    You can also pass a list of options to the postcss-loader by passing an object called postcssLoaderOptions.

    For example, to pass theme env variables to postcss-loader, you can write:

    // next.config.js
    const withSass = require('@atlea/next-sass')
    module.exports = withSass({
      postcssLoaderOptions: {
        parser: true,
        config: {
          ctx: {
            theme: JSON.stringify(process.env.REACT_APP_THEME)
          }
        }
      }
    })

    Configuring Next.js

    Optionally you can add your custom Next.js configuration as parameter

    // next.config.js
    const withSass = require('@atlea/next-sass')
    module.exports = withSass({
      webpack(config, options) {
        return config
      }
    })

    Keywords

    none

    Install

    npm i @atlea/next-sass

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    5.48 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar