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模块

2 个答案: