CODEWITHSUNDEEP
preact
Lukas
Lukas

Reputation: 10360

Preact CLI CSS Modules

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

Upvotes: 5

Views: 5935

Answers (2)

Femi Oni
Femi Oni

Reputation: 824

@Lukas i voted your answer up caused it's true, but the actually way i believe preact-cli wants us to use it is by adding all reusable styles into style/index.css file. That is added to the index.html in the build and use can reference your style with normal css reference <Comp style='my-style' ....

Upvotes: 3

Lukas
Lukas

Reputation: 10360

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

Upvotes: 10

Related Questions