Preact CLI CSS 模块

Question

该Preact CLI声称它支持CSS Modules的开箱即用。所以这就是我尝试过的；给定 2 个文件index.js和index.module.scss在同一个文件夹中，我尝试了以下操作：

索引.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