Preact CLI CSS Modules

Question

The Preact CLI claims it supports CSS Modules out of the box. So this is what I tried; Given 2 files index.js and index.module.scss in the same folder I tried this:

index.js

import { h, Component } from 'preact';
import styles from './index.module.scss';

export default class Layout extends Component {

  render() {
    console.log(styles);
    return (
      <div className={styles.container}>
        {this.props.children}
      </div>
    );
  }
}

index.module.scss

.container {
  margin: 50px auto;
  max-width: 960px;
  width: 100%;
}

The console.log statement prints {}, the class attribute in the HTML is empty.

What am I doing wrong?

Oh, to install this stuff I just did

preact create default my-project
yarn add -D node-sass sass-loader

Answer 1

I think I found the issue. preact cli forces you to put your components in the src/components folder or css modules won't work. Now it does.

For completion, it's possible to make CSS Modules work outside the /components folder: https://github.com/developit/preact-cli/issues/522#issuecomment-370835370