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语句打印{}，HTML中的class属性为空

我做错了什么？

哦，我刚刚安装了这些东西

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

Answer 2

@Lukas 我投了你的答案因为它是真的，但我相信 preact-cli 希望我们使用它的实际方式是将所有可重用样式添加到 style/index.css 文件中。即添加到index.html中构建和使用可以引用你的样式正常css引用<Comp style='my-style' ....

Preact CLI CSS 模块

Preact CLI CSS Modules

preact