<p dir="auto">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:</p>
<p dir="auto"><a href="https://github.com/zeit/next.js/tree/canary/examples/with-next-sass">https://github.com/zeit/next.js/tree/canary/examples/with-next-sass</a></p>
<p dir="auto">What I'm trying to achieve is something like this with the following file structure:</p>
<p dir="auto">Reusable components are in a folder structure so both <code class="notranslate">.js</code> and <code class="notranslate">.sass</code> files are in the same area.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="├── pages
│   ├── index.js
├── components
│   ├── Button
│   │   ├── index.js
│   │   ├── index.sass"><pre class="notranslate"><code class="notranslate">├── pages
│   ├── index.js
├── components
│   ├── Button
│   │   ├── index.js
│   │   ├── index.sass
</code></pre></div>
<p dir="auto">Import components as usual...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// pages/index.js

import Button from 'components/Button'

...

&lt;Button 
  className='book'
  text=&quot;I'm a button&quot;
  href='/about'
/&gt;
"><pre class="notranslate"><code class="notranslate">// pages/index.js

import Button from 'components/Button'

...

&lt;Button 
  className='book'
  text="I'm a button"
  href='/about'
/&gt;

</code></pre></div>
<p dir="auto">Import styles from the component's <code class="notranslate">sass</code> file, then pass the styles as properties with <code class="notranslate">styles.btn</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// 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
                ? (
                    &lt;a className={styles.btn + this.props.className} target='_blank' href={this.props.href}&gt;
                        {this.props.text}
                    &lt;/a&gt;
                ) : (
                    &lt;Link href={this.props.link}&gt;
                        &lt;a className={styles.btn + this.props.className}&gt;
                            {this.props.text}
                        &lt;/a&gt;
                    &lt;/Link&gt;
                )
        )
    }
}



"><pre class="notranslate"><code class="notranslate">// 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
                ? (
                    &lt;a className={styles.btn + this.props.className} target='_blank' href={this.props.href}&gt;
                        {this.props.text}
                    &lt;/a&gt;
                ) : (
                    &lt;Link href={this.props.link}&gt;
                        &lt;a className={styles.btn + this.props.className}&gt;
                            {this.props.text}
                        &lt;/a&gt;
                    &lt;/Link&gt;
                )
        )
    }
}




</code></pre></div>
<p dir="auto">Button's styling.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// components/Button/index.sass

.btn
  color: red
"><pre class="notranslate"><code class="notranslate">// components/Button/index.sass

.btn
  color: red

</code></pre></div>
<p dir="auto">My <code class="notranslate">next.config.js</code> setup:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const path = require('path')
const glob = require('glob')
const withSASS = require('@zeit/next-sass')

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

  exportPathMap: function () {
    return {
      &quot;/&quot;: { page: &quot;/&quot; },
      &quot;/about&quot;: { page: &quot;/about&quot; },
    }
  }, 

  webpack: (config, { dev }) =&gt; {
    return config
  }
})
"><pre class="notranslate"><code class="notranslate">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 }) =&gt; {
    return config
  }
})

</code></pre></div>
<p dir="auto">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):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;a class=&quot;EGxqjOug9lYuZ5fOMdFUbbook&quot; target=&quot;_blank&quot; href=&quot;/about&quot;&gt;I'm a button&lt;/a&gt;"><pre class="notranslate"><code class="notranslate">&lt;a class="EGxqjOug9lYuZ5fOMdFUbbook" target="_blank" href="/about"&gt;I'm a button&lt;/a&gt;
</code></pre></div>
<p dir="auto">With all of this, I have a couple of questions concerning this setup:</p>
<ol dir="auto">
<li>Is what I'm trying to achieve even possible to do at the moment?</li>
<li>Is this issue depending on how my <code class="notranslate">next.config.js</code> file is setup?</li>
<li>How would I be able to import other <code class="notranslate">sass</code> files from different directories into the <code class="notranslate">index.sass</code> of my component? For example, if I want to import breakpoint mixins into my button component, will that cause any issues with modules?</li>
</ol>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I just started to use next.js, but after the completion of the installation is encountered, only in macOS, win 10 is normal.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">`These relative modules were not found:</p>
<ul dir="auto">
<li>../../../../.4.1.4@next/dist/lib/error.js in ./node_modules/.4.1.4@next/dist/pages/_error.js?entry</li>
<li>../../../../.4.1.4@next/dist/server/document.js in ./node_modules/.4.1.4@next/dist/pages/_document.js?entry<br>
(node:6711) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead`</li>
</ul>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">My operation process :<br>
<code class="notranslate">mkdir gw</code><br>
<code class="notranslate">cd gw</code><br>
<code class="notranslate">npm install --save next react react-dom</code><br>
<code class="notranslate">mkdir pages</code><br>
<code class="notranslate">cd pages</code><br>
<code class="notranslate">vim index.js</code><br>
index.js content<br>
<code class="notranslate">export default () =&gt; &lt;div&gt;Welcome to next.js!&lt;/div&gt;</code><br>
package.json<br>
<code class="notranslate">{ "scripts": { "a": "next", "build": "next build", "start": "next start" }, "dependencies": { "next": "^4.1.4", "react": "^16.1.0", "react-dom": "^16.1.0" } }</code><br>
<code class="notranslate">npm run dev</code></p>
<h2 dir="auto">Context</h2>
<p dir="auto">I'm just going to do my project with next.js, but I've got this problem at the beginning.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.1.4</td>
</tr>
<tr>
<td>node</td>
<td>8.0.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">I hope to get help. Thank you very much!</p>