Working with SASS modules and SASS imports for components

After reading some different methods of utilizing CSS modules within Nextjs pages, I’m wanting to know if the same concept can be applied to components but with SASS. This is one of the examples I’m referencing to:

https://github.com/zeit/next.js/tree/canary/examples/with-next-sass

What I’m trying to achieve is something like this with the following file structure:

Reusable components are in a folder structure so both .js and .sass files are in the same area.

├── pages
│   ├── index.js
├── components
│   ├── Button
│   │   ├── index.js
│   │   ├── index.sass

Import components as usual…

// pages/index.js

import Button from 'components/Button'

...

<Button 
  className='book'
  text="I'm a button"
  href='/about'
/>

Import styles from the component’s sass file, then pass the styles as properties with styles.btn

// components/Button/index.js

// Libraries
import React, { Component } from 'react'
import Link from 'next/link'

// Styles
import styles from './index.sass'

export default class Button extends Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {

    }

    render() {
        return (
            this.props.href
                ? (
                    <a className={styles.btn + this.props.className} target='_blank' href={this.props.href}>
                        {this.props.text}
                    </a>
                ) : (
                    <Link href={this.props.link}>
                        <a className={styles.btn + this.props.className}>
                            {this.props.text}
                        </a>
                    </Link>
                )
        )
    }
}

Button’s styling.

// components/Button/index.sass

.btn
  color: red

My next.config.js setup:

const path = require('path')
const glob = require('glob')
const withSASS = require('@zeit/next-sass')

module.exports = withSASS({
  cssModules: true,
  distDir: 'public',

  exportPathMap: function () {
    return {
      "/": { page: "/" },
      "/about": { page: "/about" },
    }
  }, 

  webpack: (config, { dev }) => {
    return config
  }
})

The markup for the page renders, but styles aren’t being applied and the class name has a weird string with it (book is the class passed in the Button properties):

<a class="EGxqjOug9lYuZ5fOMdFUbbook" target="_blank" href="/about">I'm a button</a>

With all of this, I have a couple of questions concerning this setup:

1. Is what I’m trying to achieve even possible to do at the moment?
2. Is this issue depending on how my next.config.js file is setup?
3. How would I be able to import other sass files from different directories into the index.sass of my component? For example, if I want to import breakpoint mixins into my button component, will that cause any issues with modules?

• I have searched the issues of this repository and believe that this is not a duplicate.

[mgiraldo]

@timneutkens the _document.js part bit me too. Maybe add a heading to that part saying With or without CSS modules or something? The reader’s eyes gravitate to headings. Or maybe under each subheading (eg: right under “With CSS modules”) mention “Create your _document.js. Then…” because yo do repeat the “Create a config/index” files parts.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.