Preact CLI CSS 模块

Question

Preact CLI声称它支持CSS Modules盒子外面。所以这就是我尝试过的；给定 2 个文件 index.js和 index.module.scss在同一个文件夹中，我尝试了这个:

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%;
}

console.log声明打印 {} , class HTML 中的属性为空。

我究竟做错了什么？

哦，要安装我刚刚做的这些东西

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

Answer 1

我想我找到了问题所在。 preact cli强制您将组件放入 src/components文件夹或 css 模块将不起作用。现在确实如此。

为了完成，可以使 CSS 模块在/components 文件夹之外工作:https://github.com/developit/preact-cli/issues/522#issuecomment-370835370